Your SlideShare is downloading. ×
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Theming Ext JS 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Theming Ext JS 4

18,559

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 …

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
18,559
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
324
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Theming Ext JS 4 ROBERT DOUGAN, SENCHA
  • 2. Ext JS 4 Theme CSS3 Component Templates SASS Theming Ext JS 4 Demo
  • 3. CSS3
  • 4. Currently Design it Chop itSprite the images Add the CSS For every state!
  • 5. With CSS3 Design it Add the CSS
  • 6. Every Component!
  • 7. Component Templates
  • 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. <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. Every Component!
  • 11. Legacy Browsers?
  • 12. SASShttp://sass-lang.com
  • 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. 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. 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. 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. 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. 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. Compass
  • 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. Theming Ext JS 4
  • 22. Neptune
  • 23. Variables
  • 24. $base-color: #cc0000;
  • 25. $frame-base-color: #333;$frame-border-radius: 10px; $frame-font-size: 14px;
  • 26. Mixins
  • 27. @include extjs-button-color(‘yellow’, darken(#ddaa00, 13));
  • 28. Optimization
  • 29. /*include extjs components*/@include extjs-button;@include extjs-form;@include extjs-panel;@include extjs-qtip;@include extjs-toolbar;@include extjs-window;
  • 30. /*include extjs components*/@include extjs-button;@include extjs-panel;@include extjs-toolbar;@include extjs-window;
  • 31. Documentation
  • 32. Demo
  • 33. Questions?
  • 34. Thanks!
  • 35. @rdouganrdougan@me.com http://rwd.me @senchainc

×