theming sencha touch

Monday, November 29, 2010

Theming Sencha Touch


@davidkaneda


Theming is wicked easy!CSS3GradientsShadowsSelectors!important

SASS & Compass


The wonderful world of SASSVariablesMixinsColor functionsCompiled into CSSCompassCSS3 mixinsDev toolsExtensions

http://www.sass-lang.comhttp://www.compass-style.org/


http://www.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


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;}

.example .child { padding: 5px;}

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

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

MixinsSCSS CSS


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


SASS & Compass


config.rb


myapp.scss


SASS/Compass in Sencha Touch


Variables


$active-color$alert-color$base-color$base-gradient$bright-color$button-height$button-radius$button-stroke-weight$button-gradient$carousel-indicator-size$carousel-indicator-spacing$carousel-track-size$form-bg-color$form-field-bg-color$form-light$form-dark$form-label-width$form-field-height$form-spacing

$form-textarea-height$form-thumb-size$form-toggle-size$form-thumb-space$form-fieldset-radius$form-slider-size$global-row-height$include-button-uis$include-default-icons$include-default-uis$include-form-sliders$include-html-style$include-highlights$include-tabbar-uis$include-toolbar-uis$include-top-tabs$include-bottom-tabs$light-tab-color$light-tab-active

$page-bg-color$sheet-bg-color$sheet-button-spacing$sheet-padding$tabs-bottom-radius$tabs-bottom-icon-size$tabs-bottom-active-gradient$tabs-bottom-gradient$tabs-dark-color$tabs-dark-active-color$top-tab-height$toolbar-spacing$toolbar-input-bg$toolbar-input-color$toolbar-input-height$toolbar-gradient$toolbar-highlights$toolbar-icon-size


$base-color


$include-highlights: false;


Mixins


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);


Combining with JavaScript


The UI attribute“UI” can be added to componentsSeveral components have default UIs

Toolbar, Carousel, TabBarlight/dark

Buttonsdefault/drastic/confirm/back/forward & round/small


SCSS


SCSS

JAVASCRIPT


Icons300+ icons includedSCSS: @include pictos-icon(‘refresh’);JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }


Optimization


Optimization Tips


Optimization TipsRemove unused components

Remove ImagesRemove UIs

output_style: compressed


Live Demo


theming sencha touch

Technology

color functionsscss

px borderradius

px solid

px ms

px khtml

default uis toolbar

mixinsscss css

variablesscss css