Date post: | 28-Jan-2015 |
Category: |
Technology |
Upload: | sencha |
View: | 114 times |
Download: | 0 times |
Wednesday, November 2, 11
David Kaneda and Rob DouganBUILDING SENCHA THEMES
@davidkaneda @rdougan
Wednesday, November 2, 11
Eww.
Wednesday, November 2, 11
Sass & Compass
Hello!
http://www.sass-lang.comhttp://www.compass-style.org/
Wednesday, November 2, 11
The Basic Idea
.SCSS .CSSCompassRuby
Sass
Wednesday, November 2, 11
Variables$blue: #3bbfce;$margin: 16px;
.example1 { border-color: $blue;}
.example2 { margin: $margin; color: $blue;}
Wednesday, November 2, 11
Variables CSS.example1 { border-color: #3bbfce;}
.example2 { margin: 16px; color: #3bbfce;}
Wednesday, November 2, 11
Math$one: 8px;$two: 16px;$three: 3px;
.example1 { border: 1px solid $one / 2;}
.example2 { margin: $two + $three;}
Wednesday, November 2, 11
Math CSS.example1 { border: 1px solid 4px;}
.example2 { margin: 19px;}
Wednesday, November 2, 11
Nesting.example1 { border-color: #000; .example2 { color: red; }}
Wednesday, November 2, 11
Nesting CSS.example1 { border-color: #000;}
.example1 .example2 { color: red;}
Wednesday, November 2, 11
Color.color { color: darken(yellow, 10); background: lighten(blue, 30); border-color: saturate(#aa0000, 10);}
Wednesday, November 2, 11
Color CSS.color { color: #cccc00; background: #9999ff; border-color: #aa0000;}
Wednesday, November 2, 11
Mixins@mixin add-stuff($color) { color: $color; background-color: #000; .child { padding: 5px; }}
.example { @include add-stuff(blue);}
Wednesday, November 2, 11
Mixins CSS.example { color: blue; background-color: #000;}
.example .child { padding: 5px;}
Wednesday, November 2, 11
Compass
Wednesday, November 2, 11
Compass CSS3 Mixinsborder-radiusbox-shadowtext-shadow
opacitylinear-gradient
color-stopsand many more...
Wednesday, November 2, 11
Compass Watch
Wednesday, November 2, 11
And more…Parent referencing
FunctionsBase64 encoding
Spriting@extend
Wednesday, November 2, 11
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
Wednesday, November 2, 11
Installationsudo gem install compass
Wednesday, November 2, 11
Quick Preview
Wednesday, November 2, 11
Sencha Touch
Wednesday, November 2, 11
Wednesday, November 2, 11
CSS3GradientsText ShadowsBox ShadowsMasksBorder RadiusSelectors:first/last/nth-child:before/after
Wednesday, November 2, 11
Variables$base-color
Wednesday, November 2, 11
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);
Wednesday, November 2, 11
Icons300+ icons includedSCSS: @include pictos-iconmask(‘refresh’);JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }
Wednesday, November 2, 11
Mixins & JavaScript
Wednesday, November 2, 11
The UI attribute“UI” can be added to componentsSeveral components have default UIs
Toolbar, Carousel, TabBarlight/dark
Buttonsdefault/drastic/confirm/back/forward & round/small
Wednesday, November 2, 11
SCSS
JAVASCRIPT
Wednesday, November 2, 11
SCSS
JAVASCRIPT
Wednesday, November 2, 11
SCSS
JAVASCRIPT
Wednesday, November 2, 11
Sencha Touch 2 docs
Wednesday, November 2, 11
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.
Wednesday, November 2, 11
Optimization TipsRemove unused components
Remove ImagesRemove UIs
output_style: compressed
Wednesday, November 2, 11
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 {
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Ext JS
Wednesday, November 2, 11
Variables
Wednesday, November 2, 11
$base-color
Wednesday, November 2, 11
$grid-header-padding
0 6px 30px 10px
Wednesday, November 2, 11
Mixins
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Wednesday, November 2, 11
Slicerhttp://sencha.com/products/sdk-tools/
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Optimization
Wednesday, November 2, 11
Optimization$include-default: false;
@import 'compass';@import 'ext4/default/all';
@include extjs-button;@include extjs-panel;@include extjs-toolbar;
Wednesday, November 2, 11
Without Any Components
22kb
Wednesday, November 2, 11
RecapNew Theming System
VariablesMixinsSlicer
Optimization
Wednesday, November 2, 11
Neptune
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Kitchen Sink
Wednesday, November 2, 11
Wednesday, November 2, 11
Questions?
http://j.mp/sencha-themes
@davidkaneda@rdougan
Wednesday, November 2, 11
Wednesday, November 2, 11