Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theming Sencha Touch

16,488 views

Published on

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.

Published in: Technology
  • Be the first to comment

Theming Sencha Touch

  1. 1. Monday, November 29, 2010
  2. 2. Theming Sencha TouchMonday, November 29, 2010
  3. 3. @davidkanedaMonday, November 29, 2010
  4. 4. Theming is wicked easy! CSS3 Gradients Shadows Selectors !important SASS & CompassMonday, November 29, 2010
  5. 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. 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. 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. 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. 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. 10. CompassMonday, November 29, 2010
  11. 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. 12. SASS & CompassMonday, November 29, 2010
  13. 13. config.rbMonday, November 29, 2010
  14. 14. myapp.scssMonday, November 29, 2010
  15. 15. SASS/Compass in Sencha TouchMonday, November 29, 2010
  16. 16. VariablesMonday, November 29, 2010
  17. 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-sizeMonday, November 29, 2010
  18. 18. $base-colorMonday, November 29, 2010
  19. 19. $include-highlights: false;Monday, November 29, 2010
  20. 20. MixinsMonday, November 29, 2010
  21. 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. 22. Combining with JavaScriptMonday, November 29, 2010
  23. 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/smallMonday, November 29, 2010
  24. 24. SCSSMonday, November 29, 2010
  25. 25. SCSSMonday, November 29, 2010
  26. 26. SCSS JAVASCRIPTMonday, November 29, 2010
  27. 27. SCSS JAVASCRIPTMonday, November 29, 2010
  28. 28. SCSS JAVASCRIPTMonday, November 29, 2010
  29. 29. SCSS JAVASCRIPTMonday, November 29, 2010
  30. 30. SCSS JAVASCRIPTMonday, November 29, 2010
  31. 31. Icons 300+ icons included SCSS: @include pictos-icon(‘refresh’); JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }Monday, November 29, 2010
  32. 32. OptimizationMonday, November 29, 2010
  33. 33. Optimization TipsMonday, November 29, 2010
  34. 34. Optimization Tips Remove unused components Remove Images Remove UIs output_style: compressedMonday, November 29, 2010
  35. 35. Live DemoMonday, November 29, 2010

×