Theming Ext JS 4

Theming Ext JS 4 ROBERT DOUGAN, SENCHA

Ext JS 4 Theme CSS3 Component Templates SASS Theming Ext JS 4 Demo

Currently Design it Chop itSprite the images Add the CSS For every state!

With CSS3 Design it Add the CSS

Every Component!

Component Templates

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

Questions?

Thanks!

@rdouganrdougan@me.com http://rwd.me @senchainc

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

Theming Ext JS 4

by Sencha

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 102

Statistics

Theming Ext JS 4 Presentation Transcript