Ext js saas&compass
-
Upload
elitonweb -
Category
Technology
-
view
950 -
download
0
description
Transcript of Ext js saas&compass
![Page 1: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/1.jpg)
![Page 2: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/2.jpg)
Theming Ext JS 4
ROBERT DOUGAN, SENCHA
![Page 3: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/3.jpg)
![Page 4: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/4.jpg)
![Page 5: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/5.jpg)
Ext JS 4 ThemeCSS3
Component TemplatesSASS
Theming Ext JS 4Demo
![Page 6: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/6.jpg)
CSS3
![Page 7: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/7.jpg)
![Page 8: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/8.jpg)
CurrentlyDesign itChop it
Sprite the imagesAdd the CSS
For every state!
![Page 9: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/9.jpg)
With CSS3Design it
Add the CSS
![Page 10: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/10.jpg)
Every Component!
![Page 11: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/11.jpg)
Component Templates
![Page 12: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/12.jpg)
![Page 13: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/13.jpg)
<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> </i> </td> <td class="x-btn-tc"></td> <td class="x-btn-tr"> <i> </i> </td> </tr> <tr> <td class="x-btn-ml"> <i> </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> </i> </td> </tr> <tr> <td class="x-btn-bl"> <i> </i> </td> <td class="x-btn-bc"></td> <td class="x-btn-br"> <i> </i> </td> </tr> </tbody></table>
![Page 14: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/14.jpg)
<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>
![Page 15: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/15.jpg)
Every Component!
![Page 16: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/16.jpg)
Legacy Browsers?
![Page 18: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/18.jpg)
/* 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
![Page 19: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/19.jpg)
/* 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
![Page 20: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/20.jpg)
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;}
![Page 21: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/21.jpg)
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);}
![Page 22: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/22.jpg)
/* 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
![Page 23: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/23.jpg)
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);
![Page 24: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/24.jpg)
Compass
![Page 25: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/25.jpg)
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
![Page 26: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/26.jpg)
Theming Ext JS 4
![Page 27: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/27.jpg)
![Page 28: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/28.jpg)
Neptune
![Page 29: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/29.jpg)
![Page 30: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/30.jpg)
![Page 31: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/31.jpg)
![Page 32: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/32.jpg)
![Page 33: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/33.jpg)
![Page 34: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/34.jpg)
![Page 35: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/35.jpg)
Variables
![Page 36: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/36.jpg)
$base-color: #cc0000;
![Page 37: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/37.jpg)
$frame-base-color: #333;$frame-border-radius: 10px;
$frame-font-size: 14px;
![Page 38: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/38.jpg)
Mixins
![Page 39: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/39.jpg)
@include extjs-button-color(‘yellow’, darken(#ddaa00, 13));
![Page 40: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/40.jpg)
Optimization
![Page 41: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/41.jpg)
/*include extjs components*/@include extjs-button;@include extjs-form;@include extjs-panel;@include extjs-qtip;@include extjs-toolbar;@include extjs-window;
![Page 42: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/42.jpg)
/*include extjs components*/@include extjs-button;@include extjs-panel;@include extjs-toolbar;@include extjs-window;
![Page 43: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/43.jpg)
Documentation
![Page 44: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/44.jpg)
Demo
![Page 45: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/45.jpg)
Questions?
![Page 46: Ext js saas&compass](https://reader033.fdocuments.in/reader033/viewer/2022051012/54696edfaf795939568b70f0/html5/thumbnails/46.jpg)
Thanks!