building sencha themes

Wednesday, November 2, 11

David Kaneda and Rob DouganBUILDING SENCHA THEMES

@davidkaneda @rdougan


Eww.


Sass & Compass

Hello!

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


http://www.sass-lang.com




The Basic Idea

.SCSS .CSSCompassRuby

Sass


Variables$blue: #3bbfce;$margin: 16px;

.example1 { border-color: $blue;}

.example2 { margin: $margin; color: $blue;}


Variables CSS.example1 { border-color: #3bbfce;}

.example2 { margin: 16px; color: #3bbfce;}


Math$one: 8px;$two: 16px;$three: 3px;

.example1 { border: 1px solid $one / 2;}

.example2 { margin: $two + $three;}


Math CSS.example1 { border: 1px solid 4px;}

.example2 { margin: 19px;}


Nesting.example1 { border-color: #000; .example2 { color: red; }}


Nesting CSS.example1 { border-color: #000;}

.example1 .example2 { color: red;}


Color.color { color: darken(yellow, 10); background: lighten(blue, 30); border-color: saturate(#aa0000, 10);}


Color CSS.color { color: #cccc00; background: #9999ff; border-color: #aa0000;}


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

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


Mixins CSS.example { color: blue; background-color: #000;}

.example .child { padding: 5px;}


Compass


Compass CSS3 Mixinsborder-radiusbox-shadowtext-shadow

opacitylinear-gradient

color-stopsand many more...


Compass Watch


And more…Parent referencing

FunctionsBase64 encoding

Spriting@extend


config.rb# Get the directory that this file exists indir = File.dirname(__FILE__)

# Load the sencha-touch framework automaticallyload File.join(dir, '..', 'js', 'sencha- touch-2.0', 'resources', 'themes')

# Compass configurationssass_path = dircss_path = File.join(dir, "..", "css")environment = :debugoutput_style = :expanded


Installationsudo gem install compass


Quick Preview


Sencha Touch


CSS3GradientsText ShadowsBox ShadowsMasksBorder RadiusSelectors:first/last/nth-child:before/after


Variables$base-color


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


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


Mixins & 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

JAVASCRIPT


Sencha Touch 2 docs


Recap: When to use whatuiWherever possible. A great start even if you’re creating custom styles.

clsIf element doesn’t have ui mixins, or you want to further differentiate two elements with the same UI.

componentClsIf you’re developing a custom extension, this can be a good way to scope all of your sub-components.

style Never. Ever. Just think of it as deprecated.


Optimization TipsRemove unused components

Remove ImagesRemove UIs

output_style: compressed


myapp.scss// Colors$base-color: #F25A34; // Share orange

// Optimizations$include-default-icons: false;

// Library@import 'sencha-touch/default/all';@include sencha-panel;@include sencha-buttons;@include sencha-toolbar;@include sencha-carousel;@include sencha-indexbar;@include sencha-list;@include sencha-layout;@include sencha-msgbox;@include sencha-loading-spinner;

@import 'include/typography';

body {


Demo


Ext JS


Variables


$base-color


$grid-header-padding

0 6px 30px 10px


Mixins


Demo


Slicerhttp://sencha.com/products/sdk-tools/


http://www.sencha.com/products/sdk-tools/

http://www.sencha.com/products/sdk-tools/

Demo


Optimization


Optimization$include-default: false;

@import 'compass';@import 'ext4/default/all';

@include extjs-button;@include extjs-panel;@include extjs-toolbar;


Without Any Components

22kb


RecapNew Theming System

VariablesMixinsSlicer

Optimization


Neptune


Kitchen Sink


Questions?

http://j.mp/sencha-themes

@davidkaneda@rdougan




building sencha themes

Technology

color backgroundcolor

color css

blue backgroundcolor

sencha touch

sencha touchwednesday

px solid

import senchatouchdefaultall

senchatouch framework