Theming Ext JS 4

19,736 views
19,398 views

Published on

Ext JS 4 has a new CSS architecture which uses SASS & Compass. This will enable developers to easily create new themes. During this session you will learn how the Ext JS 4 theme was constructed, how to quickly customize the look and feel of your application and how to optimize your stylesheets for faster downloads.

Published in: Technology, Design
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
19,736
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
331
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Theming Ext JS 4

  1. 1. Theming Ext JS 4 ROBERT DOUGAN, SENCHA
  2. 2. Ext JS 4 Theme CSS3 Component Templates SASS Theming Ext JS 4 Demo
  3. 3. CSS3
  4. 4. Currently Design it Chop itSprite the images Add the CSS For every state!
  5. 5. With CSS3 Design it Add the CSS
  6. 6. Every Component!
  7. 7. Component Templates
  8. 8. <table id="ext-comp-1003" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto; "> <tbody class="x-btn-small x-btn-icon-small-left"> <tr> <td class="x-btn-tl"> <i>&nbsp;</i> </td> <td class="x-btn-tc"></td> <td class="x-btn-tr"> <i>&nbsp;</i> </td> </tr> <tr> <td class="x-btn-ml"> <i>&nbsp;</i> </td> <td class="x-btn-mc"> <em class="" unselectable="on"> <button type="button" id="ext-gen9" class=" x-btn-text">Add User</button> </em> </td> <td class="x-btn-mr"> <i>&nbsp;</i> </td> </tr> <tr> <td class="x-btn-bl"> <i>&nbsp;</i> </td> <td class="x-btn-bc"></td> <td class="x-btn-br"> <i>&nbsp;</i> </td> </tr> </tbody></table>
  9. 9. <div id="button-1003" class="x-btn x-btn-small x-gray x-btn-icon-small-left x-btn-noicon"> <button type="button" role="button" id="ext-gen1004">Add User</button></div>
  10. 10. Every Component!
  11. 11. Legacy Browsers?
  12. 12. SASShttp://sass-lang.com
  13. 13. 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;}
  14. 14. Inline Variables SCSS CSS$str:‘test’; /* line 3, ../src/test.scss */ .example.test {.example.#{$str} { color:black; color:black; }} /* line 9, ../src/test.scss */$str:‘foo’; .example.foo { color:black;.example.#{$str} { } color:black;}
  15. 15. 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;}
  16. 16. 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;} }
  17. 17. 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; .child { } padding: 5px;} } }.example { @include add-stuff(blue);}
  18. 18. Combined SCSS CSS@mixin style-btn($name, $color) { /* line 2, ../src/test.scss */ .btn.#{$name} { .btn.tangy { background:$color; background: yellow; border: 1px solid; border:1px solid; border-color: #cccc00; border-color:darken($color, 10); color: #666666; } color:lighten($color, 40); } /* line 2, ../src/test.scss */} .btn.pale { background: blue;@include style-btn(‘tangy’, yellow); border: 1px solid;@include style-btn(‘pale’, blue); border-color: #0000cc; color: #666666; }
  19. 19. Compass
  20. 20. 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; }
  21. 21. Theming Ext JS 4
  22. 22. Neptune
  23. 23. Variables
  24. 24. $base-color: #cc0000;
  25. 25. $frame-base-color: #333;$frame-border-radius: 10px; $frame-font-size: 14px;
  26. 26. Mixins
  27. 27. @include extjs-button-color(‘yellow’, darken(#ddaa00, 13));
  28. 28. Optimization
  29. 29. /*include extjs components*/@include extjs-button;@include extjs-form;@include extjs-panel;@include extjs-qtip;@include extjs-toolbar;@include extjs-window;
  30. 30. /*include extjs components*/@include extjs-button;@include extjs-panel;@include extjs-toolbar;@include extjs-window;
  31. 31. Documentation
  32. 32. Demo
  33. 33. Questions?
  34. 34. Thanks!
  35. 35. @rdouganrdougan@me.com http://rwd.me @senchainc

×