Theming Ext JS 4

ROBERT DOUGAN, SENCHA

Ext JS 4 ThemeCSS3

Component TemplatesSASS

Theming Ext JS 4Demo

CSS3

CurrentlyDesign itChop it

Sprite the imagesAdd the CSS

For every state!

With CSS3Design 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

/* line 4, ../src/test.scss */.example1 { border-color:#3bbfce;}

/* line 8, ../src/test.scss */.example2 { margin:16px; color:#3bbfce;}

$blue:#3bbfce;$margin:16px;

.example1 { border-color:$blue;}

.example2 { margin:$margin;

color:$blue;}

VariablesSCSS CSS

/* line 3, ../src/test.scss */.example.test { color:black;}

/* line 9, ../src/test.scss */.example.foo { color:black;}

$str:‘test’;

.example.#{$str} { color:black;}

$str:‘foo’;

.example.#{$str} { color:black;}

Inline VariablesSCSS CSS

Math FunctionsSCSS CSS

/* line 5, ../src/test.scss */.example1 { border: 1px solid 4px;}

/* line 9, ../src/test.scss */.example2 { margin: 48px;}

$one:8px;$two:16px;$three:3px;

.example1 { border:1px solid $one / 2;}

.example2 { margin:$two * $three;}

Color FunctionsSCSS CSS

/* line 1, ../src/test.scss */.example1 { color: #cccc00; background: #9999ff; border-color: #aa0000;}

/* line 9, ../src/test.scss */.example2 { background: #ff7f00;}

.example1 { color:darken(yellow, 10); background:lighten(blue, 30); border-color:saturate(#aa0000, 10);}

.example2 { background:mix(yellow, red);}

/* line 6, ../src/test.scss */.example { color: blue; background-color: #000;

.child { padding: 5px; }}

@mixin add-stuff($color) { color:$color; background-color:#000; .child { padding:5px; }}

.example { @include add-stuff(blue);}

MixinsSCSS CSS

CombinedSCSS CSS

/* line 2, ../src/test.scss */.btn.tangy { background: yellow; border: 1px solid; border-color: #cccc00; color: #666666;}

/* line 2, ../src/test.scss */.btn.pale { background: blue; border: 1px solid; border-color: #0000cc; color: #666666;}

@mixin style-btn($name, $color) { .btn.#{$name} { background:$color; border:1px solid; border-color:darken($color, 10); color:lighten($color, 40); }}

@include style-btn(‘tangy’, yellow);@include style-btn(‘pale’, blue);

Compass

Compass

/* line 3, ../src/test.scss */.example1 { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}

@import 'compass';

.example1 { @include border-radius(5px);}

SCSS CSS

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.comhttp://rwd.me

@senchainc