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 Calculations h1 { 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 Colors h2 { background: rgba(#00f, 0.7); } R, G, B #hex colorconst $variables

Cascading h1 { 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, *.scss span color: blue *.sass

More to Learn ★ Include partials (no asset packer needed) ★ Auto compress CSS files ★ @if, @for, @while syntax ★ “&” as current cascading placeholder

gem install compass

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

Helpers h1 { @include ellipsis; @include clearfix; } a { @include hover-link; }

Frameworks @import "blueprint"; @include blueprint; .box { @include column(3); }

More to Learn ★ Easy to extend with your own gem ★ Use other frameworks (960gs, suzy, YUI, YAML, jqTouch, …) ★ Write own frameworks

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"); } Example link a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px; }

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 { Example link background: url("icons.png") 0 -16px; padding: 20px; }

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 { Example link background: url("icons.png") 0 -36px; padding: 20px; }

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

last name first name nico@hagenburger.net e-mail twitter blog

http://www.hagenburger.net	727
http://blog.youmila.com	44
http://localhost	14
http://www.helpified.com	9
http://www.slideshare.net	1

3 Steps to Make Better & Faster Frontends

von Nico Hagenburger am 03. Juli 2010

Zugänglichkeit

Kategorien

Details hochladen

Benutzerrechte

5 Einbettungen 795

Statistiken

3 Steps to Make Better & Faster Frontends Presentation Transcript