theming sencha touch
Post on 28-Jan-2015
119 Views
Preview:
DESCRIPTION
TRANSCRIPT
Monday, November 29, 2010
Theming Sencha Touch
Monday, November 29, 2010
@davidkaneda
Monday, November 29, 2010
Theming is wicked easy!CSS3GradientsShadowsSelectors!important
SASS & Compass
Monday, November 29, 2010
The wonderful world of SASSVariablesMixinsColor functionsCompiled into CSSCompassCSS3 mixinsDev toolsExtensions
http://www.sass-lang.comhttp://www.compass-style.org/
Monday, November 29, 2010
/* 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
Monday, November 29, 2010
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;}
Monday, November 29, 2010
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);}
Monday, November 29, 2010
/* 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
Monday, November 29, 2010
Compass
Monday, November 29, 2010
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
Monday, November 29, 2010
SASS & Compass
Monday, November 29, 2010
config.rb
Monday, November 29, 2010
myapp.scss
Monday, November 29, 2010
SASS/Compass in Sencha Touch
Monday, November 29, 2010
Variables
Monday, November 29, 2010
$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
Monday, November 29, 2010
$base-color
Monday, November 29, 2010
$include-highlights: false;
Monday, November 29, 2010
Mixins
Monday, November 29, 2010
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
Combining with JavaScript
Monday, November 29, 2010
The UI attribute“UI” can be added to componentsSeveral components have default UIs
Toolbar, Carousel, TabBarlight/dark
Buttonsdefault/drastic/confirm/back/forward & round/small
Monday, November 29, 2010
SCSS
Monday, November 29, 2010
SCSS
Monday, November 29, 2010
SCSS
JAVASCRIPT
Monday, November 29, 2010
SCSS
JAVASCRIPT
Monday, November 29, 2010
SCSS
JAVASCRIPT
Monday, November 29, 2010
SCSS
JAVASCRIPT
Monday, November 29, 2010
SCSS
JAVASCRIPT
Monday, November 29, 2010
Icons300+ icons includedSCSS: @include pictos-icon(‘refresh’);JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }
Monday, November 29, 2010
Optimization
Monday, November 29, 2010
Optimization Tips
Monday, November 29, 2010
Optimization TipsRemove unused components
Remove ImagesRemove UIs
output_style: compressed
Monday, November 29, 2010
Live Demo
Monday, November 29, 2010
top related