Theming and Sass

James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com

Theming & Sass

It’s easy to forgetit’s all in a browser

CSS hopefullyneeds no introduction

<!DOCTYPE html><html> <head> <script src="sencha-touch.js" type="text/javascript"> </script> <link href="sencha-touch.css" type="text/css" rel="stylesheet" /> ...

div { background: #cc66ff;}

But CSS3 really rocks

div { background: rgba( 204, 102, 255, 0.5 );}

div { -webkit-border-radius: 10px;}

div { -webkit-box-shadow: 4px 4px 3px #000;}

div { text-shadow: 1px 1px 0px #fff;}

div { background-image: -webkit-gradient( linear, 0 0, 0 100%, from(#f77), to(#77f) );}

@font-‐face { font-‐family: Consolas; src: url(consolas.woff);}div { font-‐family: Consolas;}

Useful tools

http://sencha.com/x/bb

http://westciv.com/tools/gradients/

https://github.com/bluesmoon/pngtocss

http://www.google.com/webfonts

Sass and Compass

http://sass-lang.com/

Variables/* SCSS */ /* CSS */$blue: #3bbfce; .content-navigation {$margin: 16px; border-color: #3bbfce; color: #2b9eab;.content-navigation { } border-color: $blue; color: .border { darken($blue, 9%); padding: 8px;} margin: 8px; border-color: #3bbfce;.border { } padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

Functionsrgb($red, $green, $blue)lighten($color, $amount)complement($color)transparentize($color, $amount)...ceil($value)...if($condition, $if-true, $if-false)...

Nesting/* SCSS */ /* CSS */table.hl { table.hl { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right;} }li { li { font: { font-family: serif; family: serif; font-weight: bold; weight: bold; font-size: 1.2em; size: 1.2em; } }}

Mixins/* SCSS */ /* CSS */@mixin table-base { #data { th { float: left; text-align: center; margin-left: 10px; font-weight: bold; } } #data th { td, th {padding: 2px} text-align: center;} font-weight: bold; }@mixin left($dist) { #data td, #data th { float: left; padding: 2px; margin-left: $dist; }}#data { @include left(10px); @include table-base;}

Selector Inheritance/* SCSS */ /* CSS */.error { .error, .badError { border: 1px #f00; border: 1px #f00; background: #fdd; background: #fdd;} }.error.intrusion { font-size: 1.3em; .error.intrusion, font-weight: bold; .badError.intrusion {} font-size: 1.3em; font-weight: bold;.badError { } @extend .error; border-width: 3px; .badError {} border-width: 3px; }

http://compass-style.org/

CSS3 Modules Appearance Font Face Background Clip GradientBackground Origin Images Background Size Inline Block Border Radius Opacity Box Text Shadow Box Shadow Transform Box Sizing Transition Columns

For example/* SCSS */div { @include border-radius(4px, 4px);}/* CSS */div { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -o-border-radius: 4px / 4px; -ms-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px;}

Typography Links Text Lists Vertical Rhythm Utilities Color SpritesGeneral Tables ...

$> sudo gem install compass http://rubyinstaller.org/

$> compass create .directory sass/directory stylesheets/ create config.rb create sass/screen.scss create sass/print.scss create sass/ie.scss

$> compass compile sass/*

conﬁg.rb# Compass configurationssass_dir = "sass"css_dir = "stylesheets"output_style = :compressed# or :nested :expanded :compact

ThemingSencha Touch

conﬁg.rb # Get the directory that this # configuration file exists in dir = File.dirname(__FILE__) # Load the sencha-touch framework # automatically. load File.join(dir, .., themes) # Compass configurations sass_path = dir css_path = File.join(dir, "..", "css") environment = :production output_style = :compressed

sencha-touch.scss@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;@include sencha-tabs;@include sencha-toolbar;@include sencha-toolbar-forms;@include sencha-carousel;@include sencha-indexbar;@include sencha-list;@include sencha-list-paging;@include sencha-list-pullrefresh;@include sencha-layout;@include sencha-form;@include sencha-msgbox;@include sencha-loading-spinner;

@import sencha-touch/default/all; @import widgets; @import widgets/toolbar; ... @mixin sencha-toolbar { .x-toolbar { overflow: hidden; position: relative; ...@include sencha-toolbar;...

An easy way to optimize

sencha-touch.scss@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;@include sencha-tabs;@include sencha-toolbar;@include sencha-toolbar-forms;@include sencha-carousel;@include sencha-indexbar;@include sencha-list;@include sencha-list-paging;@include sencha-list-pullrefresh;@include sencha-layout;@include sencha-form;@include sencha-msgbox;@include sencha-loading-spinner;

147433118233 (-20%)

sencha-touch.scss$include-default-icons: false;@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;...

14743364017 (-57%)

sencha-touch.scss$include-default-icons: false;@import sencha-touch/default/all;@include pictos-iconmask(action);@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;...

Variables

apple.scss$base-color: #7c92ae;$base-gradient: glossy;$list-active-gradient: bevel;$list-header-bg-color: transparentize( saturate($base-color, 10%), .25);$list-header-gradient: matte;$tabs-dark: #111;@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;...

_variables.scss$include-html-style: true; $base-color: #354F6E;$include-default-icons: true; $base-gradient: matte;$include-form-sliders: true; $alert-color: red;$include-floating-panels: true; $confirm-color: #92cf00;$include-default-uis: true; $page-bg-color: #eee;$include-highlights: true; $global-row-height: 2.6em;$include-border-radius: true; $active-color: darken( saturate($base-color, 55%),$basic-slider: false; 10%);

http://dev.sencha.com/deploy/touch/docs/theme/

$> compass watch .>>> Change detected to:seattlebars.scssoverwrite ./seattlebars.css>>> Compass is watching forchanges. Press Ctrl-C to Stop.

$base-color: #99ccaa;

@mixin color-by-background( $bg-color, $contrast: 100%) { @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) } @else { color: lighten($bg-color, $contrast) }}

In action

https://github.com/ senchalearn/ seattlebars

ThemingExt JS 4

On the wayto Sass nirvana

ext-all.scss@import compass;@import ext4/default/all;

_all.scss@import functions;@import variables;@import mixins;@import core;@import layout/layout;@import util/tool;@import util/messagebox;@import util/splitter;@import util/resizable;@import util/dragdrop;@import util/scroller;@import util/focus;...

Variables

variables/_core.scss...$color: #000;$font-family:tahoma,arial,verdana,sans-serif;$font-size : 12px !default;$base-gradient: matte;$base-color : #C0D4ED;$neutral-color: #eeeeee;...

test.scss$base-color: #FF8000;$panel-header-font-size: 15px;@import compass;@import ext4/default/all;

Slicer$> sencha slice theme -d . -c resources/css/test.css -o ./test-images

Add these to your theme’s images directory

Chart theming

var chart = Ext.create( Ext.chart.Chart, { theme: Blue, ... });// Base, Green, Sky, Red,// Purple, Blue, Yellow...// or {}

CSS3Sass & Compass Sencha Touch Ext JS 4

James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com

http://lanyrd.com	46
http://paper.li	3
http://twitter.com	2
http://www.techgig.com	2
https://lanyrd.com	1

Theming and Sass

by James Pearce

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 54

Statistics

Theming and Sass Presentation Transcript