Theming Sencha Touch4. Theming is wicked easy!
CSS3
Gradients
Shadows
Selectors
!important
SASS & Compass
Monday, November 29, 2010
5. The wonderful world of SASS
Variables
Mixins
Color functions
Compiled into CSS
Compass
CSS3 mixins
Dev tools
Extensions
http://www.sass-lang.com
http://www.compass-style.org/
Monday, November 29, 2010
6. 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; }
}
Monday, November 29, 2010
7. 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;
}
Monday, November 29, 2010
8. 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;
} }
Monday, November 29, 2010
9. 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;
} .example .child {
} padding: 5px;
}
.example {
@include add-stuff(blue);
}
Monday, November 29, 2010
11. 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;
}
Monday, November 29, 2010
17. $active-color $form-textarea-height $page-bg-color
$alert-color $form-thumb-size $sheet-bg-color
$base-color $form-toggle-size $sheet-button-spacing
$base-gradient $form-thumb-space $sheet-padding
$bright-color $form-fieldset-radius $tabs-bottom-radius
$button-height $form-slider-size $tabs-bottom-icon-size
$button-radius $global-row-height $tabs-bottom-active-
$button-stroke-weight $include-button-uis gradient
$button-gradient $include-default-icons $tabs-bottom-gradient
$carousel-indicator-size $include-default-uis $tabs-dark-color
$carousel-indicator-spacing $include-form-sliders $tabs-dark-active-color
$carousel-track-size $include-html-style $top-tab-height
$form-bg-color $include-highlights $toolbar-spacing
$form-field-bg-color $include-tabbar-uis $toolbar-input-bg
$form-light $include-toolbar-uis $toolbar-input-color
$form-dark $include-top-tabs $toolbar-input-height
$form-label-width $include-bottom-tabs $toolbar-gradient
$form-field-height $light-tab-color $toolbar-highlights
$form-spacing $light-tab-active $toolbar-icon-size
Monday, November 29, 2010
21. Helpful Mixins
@include background-gradient($bg-color, $type);
bevel, glossy, matte, flat
@include color-by-background($bg-color, $contrast: 100%);
@include bevel-by-background($bg-color);
@include mask-by-background($bg-color, $contrast, $style);
Monday, November 29, 2010
23. The UI attribute
“UI” can be added to components
Several components have default UIs
Toolbar, Carousel, TabBar
light/dark
Buttons
default/drastic/confirm/back/forward & round/small
Monday, November 29, 2010
26. SCSS
JAVASCRIPT
Monday, November 29, 2010
27. SCSS
JAVASCRIPT
Monday, November 29, 2010
28. SCSS
JAVASCRIPT
Monday, November 29, 2010
29. SCSS
JAVASCRIPT
Monday, November 29, 2010
30. SCSS
JAVASCRIPT
Monday, November 29, 2010
31. Icons
300+ icons included
SCSS: @include pictos-icon(‘refresh’);
JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }
Monday, November 29, 2010
34. Optimization Tips
Remove unused components
Remove Images
Remove UIs
output_style: compressed
Monday, November 29, 2010