theming sencha touch
DESCRIPTION
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.TRANSCRIPT
![Page 1: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/1.jpg)
Monday, November 29, 2010
![Page 2: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/2.jpg)
Theming Sencha Touch
Monday, November 29, 2010
![Page 3: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/3.jpg)
@davidkaneda
Monday, November 29, 2010
![Page 4: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/4.jpg)
Theming is wicked easy!CSS3GradientsShadowsSelectors!important
SASS & Compass
Monday, November 29, 2010
![Page 5: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/5.jpg)
The wonderful world of SASSVariablesMixinsColor functionsCompiled into CSSCompassCSS3 mixinsDev toolsExtensions
http://www.sass-lang.comhttp://www.compass-style.org/
Monday, November 29, 2010
![Page 6: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/6.jpg)
/* line 4, ../src/test.scss */.example1 { border-color: #3bbfce;}
/* line 8, ../src/test.scss */.example2 { margin: 16px; color: #3bbfce;}
$blue: #3bbfce;$margin: 16px;
.example1 { border-color: $blue;}
.example2 { margin: $margin; color: $blue;}
VariablesSCSS CSS
Monday, November 29, 2010
![Page 7: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/7.jpg)
Math FunctionsSCSS CSS
/* line 5, ../src/test.scss */.example1 { border: 1px solid 4px;}
/* line 9, ../src/test.scss */.example2 { margin: 48px;}
$one: 8px;$two: 16px;$three: 3px;
.example1 { border: 1px solid $one / 2;}
.example2 { margin: $two * $three;}
Monday, November 29, 2010
![Page 8: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/8.jpg)
Color FunctionsSCSS CSS
/* line 1, ../src/test.scss */.example1 { color: #cccc00; background: #9999ff; border-color: #aa0000;}
/* line 9, ../src/test.scss */.example2 { background: #ff7f00;}
.example1 { color:darken(yellow, 10); background:lighten(blue, 30); border-color:saturate(#aa0000, 10);}
.example2 { background:mix(yellow, red);}
Monday, November 29, 2010
![Page 9: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/9.jpg)
/* line 6, ../src/test.scss */.example { color: blue; background-color: #000;}
.example .child { padding: 5px;}
@mixin add-stuff($color) { color:$color; background-color:#000; .child { padding:5px; }}
.example { @include add-stuff(blue);}
MixinsSCSS CSS
Monday, November 29, 2010
![Page 10: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/10.jpg)
Compass
Monday, November 29, 2010
![Page 11: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/11.jpg)
Compass
/* line 3, ../src/test.scss */.example1 { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
@import 'compass';
.example1 { @include border-radius(5px);}
SCSS CSS
Monday, November 29, 2010
![Page 12: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/12.jpg)
SASS & Compass
Monday, November 29, 2010
![Page 13: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/13.jpg)
config.rb
Monday, November 29, 2010
![Page 14: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/14.jpg)
myapp.scss
Monday, November 29, 2010
![Page 15: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/15.jpg)
SASS/Compass in Sencha Touch
Monday, November 29, 2010
![Page 16: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/16.jpg)
Variables
Monday, November 29, 2010
![Page 17: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/17.jpg)
$active-color$alert-color$base-color$base-gradient$bright-color$button-height$button-radius$button-stroke-weight$button-gradient$carousel-indicator-size$carousel-indicator-spacing$carousel-track-size$form-bg-color$form-field-bg-color$form-light$form-dark$form-label-width$form-field-height$form-spacing
$form-textarea-height$form-thumb-size$form-toggle-size$form-thumb-space$form-fieldset-radius$form-slider-size$global-row-height$include-button-uis$include-default-icons$include-default-uis$include-form-sliders$include-html-style$include-highlights$include-tabbar-uis$include-toolbar-uis$include-top-tabs$include-bottom-tabs$light-tab-color$light-tab-active
$page-bg-color$sheet-bg-color$sheet-button-spacing$sheet-padding$tabs-bottom-radius$tabs-bottom-icon-size$tabs-bottom-active-gradient$tabs-bottom-gradient$tabs-dark-color$tabs-dark-active-color$top-tab-height$toolbar-spacing$toolbar-input-bg$toolbar-input-color$toolbar-input-height$toolbar-gradient$toolbar-highlights$toolbar-icon-size
Monday, November 29, 2010
![Page 18: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/18.jpg)
$base-color
Monday, November 29, 2010
![Page 19: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/19.jpg)
$include-highlights: false;
Monday, November 29, 2010
![Page 20: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/20.jpg)
Mixins
Monday, November 29, 2010
![Page 21: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/21.jpg)
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
![Page 22: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/22.jpg)
Combining with JavaScript
Monday, November 29, 2010
![Page 23: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/23.jpg)
The UI attribute“UI” can be added to componentsSeveral components have default UIs
Toolbar, Carousel, TabBarlight/dark
Buttonsdefault/drastic/confirm/back/forward & round/small
Monday, November 29, 2010
![Page 24: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/24.jpg)
SCSS
Monday, November 29, 2010
![Page 25: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/25.jpg)
SCSS
Monday, November 29, 2010
![Page 26: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/26.jpg)
SCSS
JAVASCRIPT
Monday, November 29, 2010
![Page 27: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/27.jpg)
SCSS
JAVASCRIPT
Monday, November 29, 2010
![Page 28: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/28.jpg)
SCSS
JAVASCRIPT
Monday, November 29, 2010
![Page 29: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/29.jpg)
SCSS
JAVASCRIPT
Monday, November 29, 2010
![Page 30: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/30.jpg)
SCSS
JAVASCRIPT
Monday, November 29, 2010
![Page 31: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/31.jpg)
Icons300+ icons includedSCSS: @include pictos-icon(‘refresh’);JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }
Monday, November 29, 2010
![Page 32: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/32.jpg)
Optimization
Monday, November 29, 2010
![Page 33: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/33.jpg)
Optimization Tips
Monday, November 29, 2010
![Page 34: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/34.jpg)
Optimization TipsRemove unused components
Remove ImagesRemove UIs
output_style: compressed
Monday, November 29, 2010
![Page 35: Theming Sencha Touch](https://reader033.vdocuments.us/reader033/viewer/2022052303/54c837234a7959d7288b4587/html5/thumbnails/35.jpg)
Live Demo
Monday, November 29, 2010