Wednesday, November 2, 11
BUILDING SENCHA THEMES                            David Kaneda and Rob Dougan                              @davidkaneda @r...
Eww.Wednesday, November 2, 11
Sass & Compass                                http://www.sass-lang.com                             http://www.compass-styl...
Compass                            .SCSS   Ruby      .CSS                                     Sass                        ...
Variables       $blue: #3bbfce;       $margin: 16px;       .example1 {          border-color: $blue;       }       .exampl...
Variables CSS            .example1 {              border-color: #3bbfce;            }            .example2 {              ...
Math            $one: 8px;            $two: 16px;            $three: 3px;            .example1 {                border: 1p...
Math CSS            .example1 {              border: 1px solid 4px;            }            .example2 {              margi...
Nesting       .example1 {           border-color: #000;                  .example2 {                      color: red;     ...
Nesting CSS            .example1 {              border-color: #000;            }            .example1 .example2 {         ...
Color       .color {           color: darken(yellow, 10);           background: lighten(blue, 30);           border-color:...
Color CSS            .color {              color: #cccc00;              background: #9999ff;              border-color: #a...
Mixins       @mixin add-stuff($color) {           color: $color;           background-color: #000;                  .child...
Mixins CSS       .example {         color: blue;         background-color: #000;       }       .example .child {         p...
CompassWednesday, November 2, 11
Compass CSS3 Mixins                              border-radius                               box-shadow                   ...
Compass WatchWednesday, November 2, 11
And more…                            Parent referencing                                Functions                          ...
config.rb       # Get the directory that this file exists in       dir = File.dirname(__FILE__)       # Load the sencha-to...
Installation                            sudo gem install compassWednesday, November 2, 11
Quick PreviewWednesday, November 2, 11
Sencha TouchWednesday, November 2, 11
Wednesday, November 2, 11
CSS3       Gradients       Text Shadows       Box Shadows       Masks       Border Radius       Selectors       :first/last...
Variables                             $base-colorWednesday, November 2, 11
Mixins       @include background-gradient($bg-color, $type);       bevel, glossy, matte, flat       @include color-by-backg...
Icons       300+ icons included       SCSS: @include pictos-iconmask(‘refresh’);       JS: {xtype: ‘button’, iconCls: ‘ref...
Mixins & JavaScriptWednesday, November 2, 11
The UI attribute       “UI” can be added to components       Several components have default UIs       Toolbar, Carousel, ...
SCSS        JAVASCRIPTWednesday, November 2, 11
SCSS        JAVASCRIPTWednesday, November 2, 11
SCSS        JAVASCRIPTWednesday, November 2, 11
Sencha Touch 2 docsWednesday, November 2, 11
Recap: When to use what       ui       Wherever possible. A great start even if you’re creating       custom styles.      ...
Optimization Tips                             Remove unused components                                  Remove Images     ...
myapp.scss       // Colors       $base-color: #F25A34; // Share orange       // Optimizations       $include-default-icons...
DemoWednesday, November 2, 11
Ext JSWednesday, November 2, 11
VariablesWednesday, November 2, 11
$base-colorWednesday, November 2, 11
0 6px                   30px 10px                                    $grid-header-paddingWednesday, November 2, 11
MixinsWednesday, November 2, 11
DemoWednesday, November 2, 11
Wednesday, November 2, 11
Slicer                            http://sencha.com/products/sdk-tools/Wednesday, November 2, 11
DemoWednesday, November 2, 11
OptimizationWednesday, November 2, 11
Optimization            $include-default: false;            @import compass;            @import ext4/default/all;         ...
22kb                            Without Any ComponentsWednesday, November 2, 11
Recap                            New Theming System                                 Variables                             ...
NeptuneWednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Kitchen SinkWednesday, November 2, 11
Wednesday, November 2, 11
Questions?                            http://j.mp/sencha-themes                                 @davidkaneda              ...
Wednesday, November 2, 11
Upcoming SlideShare
Loading in …5
×

Building Sencha Themes

11,821 views

Published on

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.

Published in: Technology, Art & Photos
4 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total views
11,821
On SlideShare
0
From Embeds
0
Number of Embeds
2,152
Actions
Shares
0
Downloads
241
Comments
4
Likes
13
Embeds 0
No embeds

No notes for slide

Building Sencha Themes

  1. 1. Wednesday, November 2, 11
  2. 2. BUILDING SENCHA THEMES David Kaneda and Rob Dougan @davidkaneda @rdouganWednesday, November 2, 11
  3. 3. Eww.Wednesday, November 2, 11
  4. 4. Sass & Compass http://www.sass-lang.com http://www.compass-style.org/ He l lo !Wednesday, November 2, 11
  5. 5. Compass .SCSS Ruby .CSS Sass The Basic IdeaWednesday, November 2, 11
  6. 6. Variables $blue: #3bbfce; $margin: 16px; .example1 { border-color: $blue; } .example2 { margin: $margin; color: $blue; }Wednesday, November 2, 11
  7. 7. Variables CSS .example1 { border-color: #3bbfce; } .example2 { margin: 16px; color: #3bbfce; }Wednesday, November 2, 11
  8. 8. Math $one: 8px; $two: 16px; $three: 3px; .example1 { border: 1px solid $one / 2; } .example2 { margin: $two + $three; }Wednesday, November 2, 11
  9. 9. Math CSS .example1 { border: 1px solid 4px; } .example2 { margin: 19px; }Wednesday, November 2, 11
  10. 10. Nesting .example1 { border-color: #000; .example2 { color: red; } }Wednesday, November 2, 11
  11. 11. Nesting CSS .example1 { border-color: #000; } .example1 .example2 { color: red; }Wednesday, November 2, 11
  12. 12. Color .color { color: darken(yellow, 10); background: lighten(blue, 30); border-color: saturate(#aa0000, 10); }Wednesday, November 2, 11
  13. 13. Color CSS .color { color: #cccc00; background: #9999ff; border-color: #aa0000; }Wednesday, November 2, 11
  14. 14. Mixins @mixin add-stuff($color) { color: $color; background-color: #000; .child { padding: 5px; } } .example { @include add-stuff(blue); }Wednesday, November 2, 11
  15. 15. Mixins CSS .example { color: blue; background-color: #000; } .example .child { padding: 5px; }Wednesday, November 2, 11
  16. 16. CompassWednesday, November 2, 11
  17. 17. Compass CSS3 Mixins border-radius box-shadow text-shadow opacity linear-gradient color-stops and many more...Wednesday, November 2, 11
  18. 18. Compass WatchWednesday, November 2, 11
  19. 19. And more… Parent referencing Functions Base64 encoding Spriting @extendWednesday, November 2, 11
  20. 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 = :expandedWednesday, November 2, 11
  21. 21. Installation sudo gem install compassWednesday, November 2, 11
  22. 22. Quick PreviewWednesday, November 2, 11
  23. 23. Sencha TouchWednesday, November 2, 11
  24. 24. Wednesday, November 2, 11
  25. 25. CSS3 Gradients Text Shadows Box Shadows Masks Border Radius Selectors :first/last/nth-child :before/afterWednesday, November 2, 11
  26. 26. Variables $base-colorWednesday, November 2, 11
  27. 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. 28. Icons 300+ icons included SCSS: @include pictos-iconmask(‘refresh’); JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }Wednesday, November 2, 11
  29. 29. Mixins & JavaScriptWednesday, November 2, 11
  30. 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/smallWednesday, November 2, 11
  31. 31. SCSS JAVASCRIPTWednesday, November 2, 11
  32. 32. SCSS JAVASCRIPTWednesday, November 2, 11
  33. 33. SCSS JAVASCRIPTWednesday, November 2, 11
  34. 34. Sencha Touch 2 docsWednesday, November 2, 11
  35. 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. 36. Optimization Tips Remove unused components Remove Images Remove UIs output_style: compressedWednesday, November 2, 11
  37. 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. 38. DemoWednesday, November 2, 11
  39. 39. Ext JSWednesday, November 2, 11
  40. 40. VariablesWednesday, November 2, 11
  41. 41. $base-colorWednesday, November 2, 11
  42. 42. 0 6px 30px 10px $grid-header-paddingWednesday, November 2, 11
  43. 43. MixinsWednesday, November 2, 11
  44. 44. DemoWednesday, November 2, 11
  45. 45. Wednesday, November 2, 11
  46. 46. Slicer http://sencha.com/products/sdk-tools/Wednesday, November 2, 11
  47. 47. DemoWednesday, November 2, 11
  48. 48. OptimizationWednesday, November 2, 11
  49. 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. 50. 22kb Without Any ComponentsWednesday, November 2, 11
  51. 51. Recap New Theming System Variables Mixins Slicer OptimizationWednesday, November 2, 11
  52. 52. NeptuneWednesday, November 2, 11
  53. 53. Wednesday, November 2, 11
  54. 54. Wednesday, November 2, 11
  55. 55. Kitchen SinkWednesday, November 2, 11
  56. 56. Wednesday, November 2, 11
  57. 57. Questions? http://j.mp/sencha-themes @davidkaneda @rdouganWednesday, November 2, 11
  58. 58. Wednesday, November 2, 11

×