theming and sass
DESCRIPTION
In introduction to using CSS3, Sass, and Compass to theme mobile (and desktop) web applications built with Sencha Touch and Ext JS 4.TRANSCRIPT
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]
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/
/* SCSS */
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
Variables
rgb($red, $green, $blue)lighten($color, $amount)complement($color)transparentize($color, $amount)...
ceil($value)...
if($condition, $if-true, $if-false)...
Functions
/* SCSS */
table.hl { margin: 2em 0; td.ln { text-align: right; }}
li { font: { family: serif; weight: bold; size: 1.2em; }}
/* CSS */
table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}
li { font-family: serif; font-weight: bold; font-size: 1.2em;}
Nesting
/* SCSS */
@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px}}
@mixin left($dist) { float: left; margin-left: $dist;}
#data { @include left(10px); @include table-base;}
/* CSS */
#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}
Mixins
/* SCSS */
.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { @extend .error; border-width: 3px;}
/* CSS */
.error, .badError { border: 1px #f00; background: #fdd;}
.error.intrusion,
.badError.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { border-width: 3px;}
Selector Inheritance
http://compass-style.org/
CSS3 Modules
AppearanceBackground Clip
Background OriginBackground Size
Border RadiusBox
Box ShadowBox SizingColumns
Font Face GradientImages
Inline BlockOpacity
Text ShadowTransformTransition
/* 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;}
For example
TypographyLinksLists
TextVertical Rhythm
UtilitiesColor
GeneralSpritesTables
...
$> sudo gem install compass
http://rubyinstaller.org/
$> compass -v
Compass 0.11.1 (Antares)Copyright (c) 2008-2011 Chris EppsteinReleased under the MIT License.
$> sass -v
Sass 3.1.1 (Brainy Betty)
$> compass create .
directory sass/directory stylesheets/ create config.rb create sass/screen.scss create sass/print.scss create sass/ie.scss
$> compass compile sass/*
# Compass configurationssass_dir = "sass"css_dir = "stylesheets"output_style = :compressed
# or :nested :expanded :compact
config.rb
ThemingSencha Touch
# Get the directory that this# configuration file exists indir = File.dirname(__FILE__)
# Load the sencha-touch framework# automatically.load File.join(dir, '..', 'themes')
# Compass configurationssass_path = dircss_path = File.join(dir, "..", "css")environment = :productionoutput_style = :compressed
config.rb
@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;
sencha-touch.scss
@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
@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;
sencha-touch.scss
147433
118233(-20%)
$include-default-icons: false;
@import 'sencha-touch/default/all';
@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;...
sencha-touch.scss
147433
64017(-57%)
$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;...
sencha-touch.scss
Variables
$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;...
apple.scss
_variables.scss
$include-html-style: true;
$include-default-icons: true;
$include-form-sliders: true;
$include-floating-panels: true;
$include-default-uis: true;
$include-highlights: true;
$include-border-radius: true;
$basic-slider: false;
$base-color: #354F6E;
$base-gradient: 'matte';
$alert-color: red;
$confirm-color: #92cf00;
$page-bg-color: #eee;
$global-row-height: 2.6em;
$active-color: darken( saturate($base-color, 55%), 10%);
http://dev.sencha.com/deploy/touch/docs/theme/
$> compass watch .
>>> Change detected to: seattlebars.scssoverwrite ./seattlebars.css
>>> Compass is watching for changes. 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
@import 'compass';@import 'ext4/default/all';
ext-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';...
_all.scss
Variables
...
$color: #000;$font-family: tahoma,arial,verdana,sans-serif;
$font-size : 12px !default;
$base-gradient: 'matte';$base-color : #C0D4ED;$neutral-color: #eeeeee;
...
variables/_core.scss
$base-color: #FF8000;
$panel-header-font-size: 15px;
@import 'compass';@import 'ext4/default/all';
test.scss
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 TouchExt JS 4
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]