Learn how to use the power of CSS3, Sass, Compass, and Sencha tools to create consistent and cross-platform themes for Ext JS 4 and Sencha Touch. David Kaneda leads the Sencha design team. He has over eight years of experience designing in a variety of fields, from architecture and fashion to education and software. Recently, David created Outpost, an iPhone app for Basecamp, and jQTouch, a Javascript framework for iPhone development. David also maintains WebKitBits, a site about the browser engine in Safari, Google Chrome, and the iPhone. David brings his wealth of design knowledge to Sencha, and is responsible for the look and feel of our websites and software. Rob Dougan is a Sencha core engineer with an eye for pixel-perfect designs. Born and raised in Northern Ireland, he has been building advanced Sencha applications for years and is a valued asset to the team. In his spare time he enjoys photography and cooking with his wife.

1. Wednesday, November 2, 11

2. BUILDING SENCHA THEMES
David Kaneda and Rob Dougan
@davidkaneda @rdougan
Wednesday, November 2, 11

3. Eww.
Wednesday, November 2, 11

4. Sass & Compass
http://www.sass-lang.com
http://www.compass-style.org/
He l lo !
Wednesday, November 2, 11

5. Compass
.SCSS Ruby .CSS
Sass
The Basic Idea
Wednesday, November 2, 11

6. Variables
$blue: #3bbfce;
$margin: 16px;
.example1 {
border-color: $blue;
}
.example2 {
margin: $margin;
color: $blue;
}
Wednesday, November 2, 11

7. Variables CSS
.example1 {
border-color: #3bbfce;
}
.example2 {
margin: 16px;
color: #3bbfce;
}
Wednesday, November 2, 11

8. Math
$one: 8px;
$two: 16px;
$three: 3px;
.example1 {
border: 1px solid $one / 2;
}
.example2 {
margin: $two + $three;
}
Wednesday, November 2, 11

9. Math CSS
.example1 {
border: 1px solid 4px;
}
.example2 {
margin: 19px;
}
Wednesday, November 2, 11

10. Nesting
.example1 {
border-color: #000;
.example2 {
color: red;
}
}
Wednesday, November 2, 11

11. Nesting CSS
.example1 {
border-color: #000;
}
.example1 .example2 {
color: red;
}
Wednesday, November 2, 11

12. Color
.color {
color: darken(yellow, 10);
background: lighten(blue, 30);
border-color: saturate(#aa0000, 10);
}
Wednesday, November 2, 11

13. Color CSS
.color {
color: #cccc00;
background: #9999ff;
border-color: #aa0000;
}
Wednesday, November 2, 11

14. Mixins
@mixin add-stuff($color) {
color: $color;
background-color: #000;
.child {
padding: 5px;
}
}
.example {
@include add-stuff(blue);
}
Wednesday, November 2, 11

15. Mixins CSS
.example {
color: blue;
background-color: #000;
}
.example .child {
padding: 5px;
}
Wednesday, November 2, 11

16. Compass
Wednesday, November 2, 11

17. Compass CSS3 Mixins
border-radius
box-shadow
text-shadow
opacity
linear-gradient
color-stops
and many more...
Wednesday, November 2, 11

18. Compass Watch
Wednesday, November 2, 11

19. And more…
Parent referencing
Functions
Base64 encoding
Spriting
@extend
Wednesday, November 2, 11

20. config.rb
# Get the directory that this file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically
load File.join(dir, '..', 'js', 'sencha-
touch-2.0', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
environment = :debug
output_style = :expanded
Wednesday, November 2, 11

21. Installation
sudo gem install compass
Wednesday, November 2, 11

22. Quick Preview
Wednesday, November 2, 11

23. Sencha Touch
Wednesday, November 2, 11

24. Wednesday, November 2, 11

25. CSS3
Gradients
Text Shadows
Box Shadows
Masks
Border Radius
Selectors
:first/last/nth-child
:before/after
Wednesday, November 2, 11

26. Variables
$base-color
Wednesday, November 2, 11

27. Mixins
@include background-gradient($bg-color, $type);
bevel, glossy, matte, flat
@include color-by-background($bg-color, $contrast: 100%);
@include bevel-by-background($bg-color);
@include mask-by-background($bg-color, $contrast, $style);
Wednesday, November 2, 11

28. Icons
300+ icons included
SCSS: @include pictos-iconmask(‘refresh’);
JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }
Wednesday, November 2, 11

29. Mixins & JavaScript
Wednesday, November 2, 11

30. The UI attribute
“UI” can be added to components
Several components have default UIs
Toolbar, Carousel, TabBar
light/dark
Buttons
default/drastic/confirm/back/forward & round/small
Wednesday, November 2, 11

31. SCSS
JAVASCRIPT
Wednesday, November 2, 11

32. SCSS
JAVASCRIPT
Wednesday, November 2, 11

33. SCSS
JAVASCRIPT
Wednesday, November 2, 11

34. Sencha Touch 2 docs
Wednesday, November 2, 11

35. Recap: When to use what
ui
Wherever possible. A great start even if you’re creating
custom styles.
cls
If element doesn’t have ui mixins, or you want to further
differentiate two elements with the same UI.
componentCls
If you’re developing a custom extension, this can be a
good way to scope all of your sub-components.
style Never. Ever. Just think of it as deprecated.
Wednesday, November 2, 11

36. Optimization Tips
Remove unused components
Remove Images
Remove UIs
output_style: compressed
Wednesday, November 2, 11

37. myapp.scss
// Colors
$base-color: #F25A34; // Share orange
// Optimizations
$include-default-icons: false;
// Library
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-msgbox;
@include sencha-loading-spinner;
@import 'include/typography';
body {
Wednesday, November 2, 11

38. Demo
Wednesday, November 2, 11

39. Ext JS
Wednesday, November 2, 11

40. Variables
Wednesday, November 2, 11

41. $base-color
Wednesday, November 2, 11

42. 0 6px 30px 10px
$grid-header-padding
Wednesday, November 2, 11

43. Mixins
Wednesday, November 2, 11

44. Demo
Wednesday, November 2, 11

45. Wednesday, November 2, 11

46. Slicer
http://sencha.com/products/sdk-tools/
Wednesday, November 2, 11

47. Demo
Wednesday, November 2, 11

48. Optimization
Wednesday, November 2, 11

49. Optimization
$include-default: false;
@import 'compass';
@import 'ext4/default/all';
@include extjs-button;
@include extjs-panel;
@include extjs-toolbar;
Wednesday, November 2, 11

50. 22kb
Without Any Components
Wednesday, November 2, 11

51. Recap
New Theming System
Variables
Mixins
Slicer
Optimization
Wednesday, November 2, 11

52. Neptune
Wednesday, November 2, 11

53. Wednesday, November 2, 11

54. Wednesday, November 2, 11

55. Kitchen Sink
Wednesday, November 2, 11

56. Wednesday, November 2, 11

57. Questions?
http://j.mp/sencha-themes
@davidkaneda
@rdougan
Wednesday, November 2, 11

58. Wednesday, November 2, 11