Slide 1

Slide 1 text

Advanced Theming - (with Sass/Compass mixins, scripts and other techniques) http://picklebums.com/wp-content/uploads/2010/06/crayon-drawing.jpg Monday, May 7, 12

Slide 2

Slide 2 text

Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley http://www.github.com/nickcooley Monday, May 7, 12

Slide 3

Slide 3 text

What we’ll talk about in this session... •Recap of Sass/Compass •Advanced Sass •Control Structures •Color Functions •Advanced Compass •Geometric functions and constants •Application to Sencha Touch •DEMOS! Monday, May 7, 12

Slide 4

Slide 4 text

What this Presentation ISN’T •Sass vs LESS vs Stylus •Why using a CSS Preprocessor is better than not using one •A conversation about how Preprocessors can bloat your CSS Many great articles arguing the merits/gotchas of using a pre- processor. Here’s one I really agree with: http://bit.ly/Sassisntbad My personal opinion: “Like everything in technology, preprocessors are a tool in your arsenal. You should understand the fundamentals of CSS before relying on them.” Monday, May 7, 12

Slide 5

Slide 5 text

What this Presentation ISN’T •How to code/structure CSS The hope is that you have *some* CSS knowledge and are aware of best practices. If not, here’s a great article for you: kiano.sh/Inxxym •How to build apps with Sencha Touch While we will go over examples that include demo Sencha Touch apps, the focus really is on the Sass/ Compass and resulting CSS Monday, May 7, 12

Slide 6

Slide 6 text

Let’s Recap: Monday, May 7, 12

Slide 7

Slide 7 text

What is Sass? •Stands for “Syntactically Awesome StyleSheets” •“Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” •The foundation for style implementations in ExtJS and Sencha Touch •Ruby Based Monday, May 7, 12

Slide 8

Slide 8 text

Sass Most Popular Features: •Nesting •Variables •Mixins •Functions •@extend Monday, May 7, 12

Slide 9

Slide 9 text

•Sass: Allows you to nest selectors within a parent selector. •This provides an approach that’s clean, concise, unique and DRY Sass: Nesting div { &.content { .element { h1 {...} } } } //outputs div.content .element h1 {...} Monday, May 7, 12

Slide 10

Slide 10 text

Sass: Variables •Allow you to quickly parameterize your CSS •Create diverse variations in seconds! •Helps you create design standards for your CSS. •Using a main color in a number of selectors? Create a variable! $color: #fff; $pxHeight: 10px; Monday, May 7, 12

Slide 11

Slide 11 text

Sass: Mixins •Mixins:Sass :: Functions:Javascript •Allow you to define patterns for reuse •Mixins can be imported across projects, helping you to create your own framework @mixin pictos-iconmask($name) { .x-button .x-button-icon.x-icon-mask.#{$name} { -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png"); } } Monday, May 7, 12

Slide 12

Slide 12 text

Compass • Box Shadow • Text Shadow • Sprites • Web Fonts • More! • Collection of Sass mixins and variables • X-Browser CSS3 mixins • Rounded Corners • Gradients • Common CSS development Patterns • Reset.css • Clearfix • CSS3 Pie Monday, May 7, 12

Slide 13

Slide 13 text

Let’s turn it up to 11 http://4.bp.blogspot.com/_8lK2el5pnbU/S-dDjMziqsI/AAAAAAAAGMc/YkZMHVA2-5k/s1600/SpinalTap_.jpg Monday, May 7, 12

Slide 14

Slide 14 text

Control Directives in Sass Very similar to a number of control directives in languages like javascript, ruby, PHP -- Sass provides some rudimentary functionality: •if/else if/else •for •while •each Monday, May 7, 12

Slide 15

Slide 15 text

@if Works like every “if” directive you’ve ever used (if, else if, else) •create exceptional cases determined by CSS controlled attribute OR •Sass also contains an “if” function which works as: if($condition, $if-true, $if-false) Monday, May 7, 12

Slide 16

Slide 16 text

@if examples •Example of default @if method implementation •Example of if() function method @if $type == bevel {...} @else if $type == matte {...} @else {...} border: if($i%2==0, 1px solid #000, 4px solid #333); Monday, May 7, 12

Slide 17

Slide 17 text

@for Is different from the “for” directive in most programming languages •two types: “to” and “through” •cannot count down •can only iterate by one Monday, May 7, 12

Slide 18

Slide 18 text

•Example of “to” •Example of “through” @for examples @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; } .item-3 {width: 6em; } @for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } } //outputs .item-1 {width: 2em; } .item-2 {width: 4em; } Monday, May 7, 12

Slide 19

Slide 19 text

Iterates across a range of values using a statement evaluation until it results in false •can evaluate to < > == •WARNING: you must adjust the evaluation variable manually @while $i: 8; @while $i > 0 { .box#{$i} { $factor: 100px - ($i * 10); height:$factor !important; width:$factor !important; background: #333; $i: $i - 1; } } Monday, May 7, 12

Slide 20

Slide 20 text

@each Iterates through a list of items individually •Can include list as parameter or variable $list: (bob, steve, rob); @each $person in $list { .#{$person}{background-image: url($person);} } // CSS output .bob {background-image:url(bob); } .steve {background-image:url(steve); } .rob {background-image:url(rob); } Monday, May 7, 12

Slide 21

Slide 21 text

Colors in Sass One of the least discussed features in Sass are color features •Create themes/schemes/palettes based on harmonious color relationships •Mix colors using color relationships •Sass has operations for RGB and HSL Monday, May 7, 12

Slide 22

Slide 22 text

Color Functions •complement •adjust-hue •lighten/darken •color math •AND MANY MORE! Monday, May 7, 12

Slide 23

Slide 23 text

The Boxes •A really basic demo which shows various color functions/control directives Monday, May 7, 12

Slide 24

Slide 24 text

Compass may be a framework, but it provides a number of helpful functions which can make interesting results: •Geometry functions: •sin(), cos(), tan(), pi() •Additional math functions: •e(), log(), sqrt() Advance processing in Compass Monday, May 7, 12

Slide 25

Slide 25 text

The benefits of advanced functions With these functions, you can: •Offload some of the processing for things you might do in javascript for faster performance •Be able to calculate in one place and not worry about it. •Do things like: •calculate coordinates on a circle •plot points on a graph •create some interesting designs using math! Monday, May 7, 12

Slide 26

Slide 26 text

Demos Monday, May 7, 12

Slide 27

Slide 27 text

HSL.clrpick.me •Starting off with a base color, generate related color-sets based on hsl relationships. •This can help you determine what colors might go with your initial color. •Color relationships are based on Sass color functions Monday, May 7, 12

Slide 28

Slide 28 text

So let’s put it all together HSL clrpick.me uses Sass/Compass for •Iterators •Positioning color swatches in 360 using Compass geometry •Adjusts color using pre-defined relationships Monday, May 7, 12

Slide 29

Slide 29 text

First, an example Monday, May 7, 12

Slide 30

Slide 30 text

The Color Wheel Monday, May 7, 12

Slide 31

Slide 31 text

The Color Wheel @include circlefy(200, $deg); @mixin circlefy($radius, $deg){ $rad: angleToRadians($deg); @include radiansToCartesian($rad, $radius); } @function angleToRadians($a){ $pi: pi(); $angle: ($a) / 180; $radians: $pi * $angle; @return $radians; } @mixin radiansToCartesian($r, $radius){ $x: round($radius * cos($r)); $y: round($radius * sin($r)); top: #{$y}px; left:#{$x}px; } Monday, May 7, 12

Slide 32

Slide 32 text

The S & L Bars Monday, May 7, 12

Slide 33

Slide 33 text

The S and L bars $light : lightness($colorwheel1); @for $i from 0 through 10 { &:nth-child(#{$i + 1}){ $startBackground: lighten($colorwheel1, 100); $val: $i * 10; background: darken($startBackground, $val ); span {margin-left:0; right:55px;} span:after {content: "lightness: #{$val} color: #{darken($startBackground, $val )}";} } } Monday, May 7, 12

Slide 34

Slide 34 text

But hey, you said “Sencha Touch” Sencha Touch is a javascript framework which relies on Sass/Compass for its look/ feel. •Sencha has put together a really solid set of mixins: buttons, pictomasks, toolbars •There’s really no limit to what you can add using Sass/Compass specific to your applications Monday, May 7, 12

Slide 35

Slide 35 text

Sencha Touch Docs Throughout the Sencha Touch documentation, you’ll find predefined mixins which you can use out-of-the-box Monday, May 7, 12

Slide 36

Slide 36 text

ST2 Demo Just to show you that modifying Sass/ Compass for Sencha Touch is just as easy as it is for anything else.... Monday, May 7, 12

Slide 37

Slide 37 text

Links • Sass Site: sass-lang.com • Compass Site: compass-style.org • Compass.app Site: compass.handlino.com • HSL Color Picker: hsl.clrpick.me or github.com/nickcooley/clrpick.me • Manning Sass Book : manning.com/netherland/ • LiveReload : livereload.com • FireSass : addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ Monday, May 7, 12