Building Sencha Themes

Wednesday, November 2, 11

David Kaneda and Rob DouganBUILDING SENCHA THEMES

@davidkaneda @rdougan

Sass & Compass

Hello!

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

The Basic Idea

.SCSS .CSSCompassRuby

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

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 {

Ext JS

Variables

$base-color

$grid-header-padding

0 6px 30px 10px

Mixins

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

Optimization

Optimization$include-default: false;

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

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

Without Any Components

RecapNew Theming System

VariablesMixinsSlicer

Optimization

Neptune

Kitchen Sink

Questions?

http://j.mp/sencha-themes

@davidkaneda@rdougan

Building Sencha Themes

color backgroundcolor

color css

blue backgroundcolor

sencha touch

sencha touchwednesday

px solid

import senchatouchdefaultall

senchatouch framework

Technology

Sencha Services

Workshop on Sencha Touch - Part 3 - MVC in sencha touch

Building with Sencha & Touch Higher Standards

Build Tizen HTML5 Apps w/ Sencha Architect & Sencha Touch

Rich mobile apps with sencha touch - intro to sencha

Sencha Roadshow 2017: Sencha Best Practices: Coworkee App

Sencha WP as to JS Sencha

Videogram - Building a product with Sencha Touch

Building Enterprise Apps with Sencha ExtJS/Touch & DeftJS

SenchaCon 2016: Building Enterprise Ext JS Apps with...

[Sencha 엔터프라이즈 웹애플리케이션 세미나]....

Building Desktop & Mobile Apps with Sencha and Force.com

Building Enterprise Apps with Sencha & DeftJS

Codementor Office Hours: Sencha Ext JS 101 - Building Apps.....

Curso Sencha Touch 2 - Aula01 - Introdução ao Sencha Touch...

Sencha architect2