Post on 28-Jan-2015
description
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/
/* 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 jamesp@sencha.com