Sencha Touch features a novel theming system built on top of SASS & Compass. This session will show you how to quickly customize the look and feel of your application, extend core styles, and optimize your stylesheets to download faster. Lot of code samples and walkthroughs included.

1. Monday, November 29, 2010

2. Theming Sencha Touch
Monday, November 29, 2010

3. @davidkaneda
Monday, November 29, 2010

4. Theming is wicked easy!
CSS3
Gradients
Shadows
Selectors
!important
SASS & Compass
Monday, November 29, 2010

5. The wonderful world of SASS
Variables
Mixins
Color functions
Compiled into CSS
Compass
CSS3 mixins
Dev tools
Extensions
http://www.sass-lang.com
http://www.compass-style.org/
Monday, November 29, 2010

6. Variables
SCSS CSS
$blue: #3bbfce; /* line 4, ../src/test.scss */
$margin: 16px; .example1 {
border-color: #3bbfce;
.example1 { }
border-color: $blue;
} /* line 8, ../src/test.scss */
.example2 {
.example2 { margin: 16px;
margin: $margin; color: #3bbfce;
color: $blue; }
}
Monday, November 29, 2010

7. Math Functions
SCSS CSS
$one: 8px; /* line 5, ../src/test.scss */
$two: 16px; .example1 {
$three: 3px; border: 1px solid 4px;
}
.example1 {
border: 1px solid $one / 2; /* line 9, ../src/test.scss */
} .example2 {
margin: 48px;
.example2 { }
margin: $two * $three;
}
Monday, November 29, 2010

8. Color Functions
SCSS CSS
.example1 { /* line 1, ../src/test.scss */
color:darken(yellow, 10); .example1 {
color: #cccc00;
background:lighten(blue, 30); background: #9999ff;
border-color: #aa0000;
border-color:saturate(#aa0000, 10); }
}
/* line 9, ../src/test.scss */
.example2 { .example2 {
background:mix(yellow, red); background: #ff7f00;
} }
Monday, November 29, 2010

9. Mixins
SCSS CSS
@mixin add-stuff($color) { /* line 6, ../src/test.scss */
color:$color; .example {
background-color:#000; color: blue;
background-color: #000;
.child { }
padding:5px;
} .example .child {
} padding: 5px;
}
.example {
@include add-stuff(blue);
}
Monday, November 29, 2010

10. Compass
Monday, November 29, 2010

11. Compass
SCSS CSS
@import 'compass'; /* line 3, ../src/test.scss */
.example1 {
.example1 { -moz-border-radius: 5px;
@include border-radius(5px); -webkit-border-radius: 5px;
} -o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Monday, November 29, 2010

12. SASS & Compass
Monday, November 29, 2010

13. config.rb
Monday, November 29, 2010

14. myapp.scss
Monday, November 29, 2010

15. SASS/Compass
in Sencha Touch
Monday, November 29, 2010

16. Variables
Monday, November 29, 2010

17. $active-color $form-textarea-height $page-bg-color
$alert-color $form-thumb-size $sheet-bg-color
$base-color $form-toggle-size $sheet-button-spacing
$base-gradient $form-thumb-space $sheet-padding
$bright-color $form-fieldset-radius $tabs-bottom-radius
$button-height $form-slider-size $tabs-bottom-icon-size
$button-radius $global-row-height $tabs-bottom-active-
$button-stroke-weight $include-button-uis gradient
$button-gradient $include-default-icons $tabs-bottom-gradient
$carousel-indicator-size $include-default-uis $tabs-dark-color
$carousel-indicator-spacing $include-form-sliders $tabs-dark-active-color
$carousel-track-size $include-html-style $top-tab-height
$form-bg-color $include-highlights $toolbar-spacing
$form-field-bg-color $include-tabbar-uis $toolbar-input-bg
$form-light $include-toolbar-uis $toolbar-input-color
$form-dark $include-top-tabs $toolbar-input-height
$form-label-width $include-bottom-tabs $toolbar-gradient
$form-field-height $light-tab-color $toolbar-highlights
$form-spacing $light-tab-active $toolbar-icon-size
Monday, November 29, 2010

18. $base-color
Monday, November 29, 2010

19. $include-highlights: false;
Monday, November 29, 2010

20. Mixins
Monday, November 29, 2010

21. Helpful 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);
Monday, November 29, 2010

22. Combining with JavaScript
Monday, November 29, 2010

23. 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
Monday, November 29, 2010

24. SCSS
Monday, November 29, 2010

25. SCSS
Monday, November 29, 2010

26. SCSS
JAVASCRIPT
Monday, November 29, 2010

27. SCSS
JAVASCRIPT
Monday, November 29, 2010

28. SCSS
JAVASCRIPT
Monday, November 29, 2010

29. SCSS
JAVASCRIPT
Monday, November 29, 2010

30. SCSS
JAVASCRIPT
Monday, November 29, 2010

31. Icons
300+ icons included
SCSS: @include pictos-icon(‘refresh’);
JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }
Monday, November 29, 2010

32. Optimization
Monday, November 29, 2010

33. Optimization Tips
Monday, November 29, 2010

34. Optimization Tips
Remove unused components
Remove Images
Remove UIs
output_style: compressed
Monday, November 29, 2010

35. Live Demo
Monday, November 29, 2010