Theming Ext JS 4
Upcoming SlideShare
Loading in...5
×
 

Theming Ext JS 4

on

  • 18,923 views

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.

Statistics

Views

Total Views
18,923
Views on SlideShare
18,821
Embed Views
102

Actions

Likes
6
Downloads
314
Comments
1

3 Embeds 102

http://www.sencha.com 94
http://pinterest.com 7
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • how do i use the neptune theme plz?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Theming Ext JS 4 Theming Ext JS 4 Presentation Transcript

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