3 steps to make better & faster frontends

3 Steps to Make Better & Faster

Frontends

SCSS > DRY CSS

Compass > Simple CCS3

Lemonade > Easy Sprites

gem install haml

Variables$my-color: #ab42ef;

body { background: $my-color;}

Color Calculationsh1 { background: lighten($my-color, 23%); color: darken(#c24, 10%); border-color: desaturate(red, 50%);}

Color Functions★ opacify(color, amount)★ transparentize(color, amount)★ lighten(color, amount)★ darken(color, amount)★ saturate(color, amount)★ desaturate(color, amount)★ adjust-hue(color, degrees)★ mix(color1, color2, weight)★ grayscale(color)★ complement(color)

RGBA Colorsh2 { background: rgba(#00f, 0.7);}

R, G, B#hex

colorconst$variables

Cascadingh1 { color: red; a { color: blue; }}

Mixins@mixin my-style { background: red;}

.my-box { @include my-style;}

Mixin Parameters@mixin my-style($color: red) { background: darken($color, 5%);}

.my-box { @include my-style(#ff0);}

Cascading Mixins@mixin my-style { a { background: red; }}

.my-box { @include my-style;}

Extending.box { background: red;}

.bordered-box { border: 1px black solid; @extend .box;}

Result.box, .bordered-box { background: red;}

.bordered-box { border: 1px black solid;}

@extend=

inverse mixin

Alternative Syntax=my-style($color: red) background: darken($color, 5%)

.my-box color: red +my-style(#ff0) a, span color: blue *.sass

*.scss

More to Learn★ Include partials

(no asset packer needed)

★ Auto compress CSS files

★ @if, @for, @while syntax

★ “&” as current cascading placeholder

SCSS > DRY CSS

Compass > Simple CCS3

Lemonade > Easy Sprites

gem install compass

CSS3@import "compass";

.box { background: red; @include border-radius(4px); @include box-shadow( rgba(#ccc, 0.5), 3px, 3px, 5px));}

Helpersh1 { @include ellipsis; @include clearfix;}

a { @include hover-link;}

Frameworks@import "blueprint";

@include blueprint;

.box { @include column(3);}

★ Easy to extend with your own gem

★ Use other frameworks(960gs, suzy, YUI, YAML, jqTouch, …)

★ Write own frameworks

More to Learn

SCSS > DRY CSS

Compass > Simple CCS3

Lemonade > Easy Sprites

gem install lemonade

Simple Sprites.add { background: sprite-image("icons/pl.png");}

.remove { background: sprite-image("icons/rm.png");}

all icons by p.yusukekamiyamane.com (CC by 3.0)

Output.add { background: url("icons.png");}

.remove { background: url("icons.png") 0 -16px;}

Right Aligned.something { background: sprite-image("i/wide.png");}a.next { background: yellow no-repeat sprite-image("i/n.png", 100%); padding-right: 20px;}

Result.something { background: url("i.png");}a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px;}

Example link

Empty Space.add { background: sprite-image("icons/pl.png");}.remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px;}

Could be Better.add { background: url("icons.png");}.remove { background: url("icons.png") 0 -16px; padding: 20px;}

Example link

Empty Space.add { background: sprite-image("icons/pl.png");}.remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }

Just Perfect.add { background: url("icons.png");}.remove { background: url("icons.png") 0 -36px; padding: 20px;}

Example link

Sprite Generation★ Sprite image named by directory:

“icons/*.png” > “icons.png”

★ Background position added only if needed

★ Add “no-repeat” by yourself:background: sprite-image("…") no-repeat;

Any questions?

Happy forking:http://github.com/nex3/haml

http://github.com/chriseppstein/compass

http://github.com/hagenburger/lemonade

Further reading:http://www.sass-lang.com

http://www.compass-style.org/docs/

http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html

nico@hagenburger.nete-mail

twitter

blog

first name

last name