3 Steps to Make Better & Faster Frontends

5,214
-1

Published on

3 Steps to Make Better & Faster Frontends with SCSS/Sass, Compass and Lemonade for CSS sprites. I gave this talk at Railscamp Germany 4.

Published in: Art & Photos, Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,214
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
66
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

3 Steps to Make Better & Faster Frontends

  1. 1. 3 Steps to Make Better & Faster Frontends
  2. 2. SCSS > DRY CSS Compass > Simple CCS3 Lemonade > Easy Sprites
  3. 3. gem install haml
  4. 4. Variables $my-color: #ab42ef; body { background: $my-color; }
  5. 5. Color Calculations h1 { background: lighten($my-color, 23%); color: darken(#c24, 10%); border-color: desaturate(red, 50%); }
  6. 6. 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)
  7. 7. RGBA Colors h2 { background: rgba(#00f, 0.7); } R, G, B #hex colorconst $variables
  8. 8. Cascading h1 { color: red; a { color: blue; } }
  9. 9. Mixins @mixin my-style { background: red; } .my-box { @include my-style; }
  10. 10. Mixin Parameters @mixin my-style($color: red) { background: darken($color, 5%); } .my-box { @include my-style(#ff0); }
  11. 11. Cascading Mixins @mixin my-style { a { background: red; } } .my-box { @include my-style; }
  12. 12. Extending .box { background: red; } .bordered-box { border: 1px black solid; @extend .box; }
  13. 13. Result .box, .bordered-box { background: red; } .bordered-box { border: 1px black solid; }
  14. 14. @extend = inverse mixin
  15. 15. Alternative Syntax =my-style($color: red) background: darken($color, 5%) .my-box color: red +my-style(#ff0) a, *.scss span color: blue *.sass
  16. 16. More to Learn ★ Include partials (no asset packer needed) ★ Auto compress CSS files ★ @if, @for, @while syntax ★ “&” as current cascading placeholder
  17. 17. SCSS > DRY CSS Compass > Simple CCS3 Lemonade > Easy Sprites
  18. 18. gem install compass
  19. 19. CSS3 @import "compass"; .box { background: red; @include border-radius(4px); @include box-shadow( rgba(#ccc, 0.5), 3px, 3px, 5px)); }
  20. 20. Helpers h1 { @include ellipsis; @include clearfix; } a { @include hover-link; }
  21. 21. Frameworks @import "blueprint"; @include blueprint; .box { @include column(3); }
  22. 22. More to Learn ★ Easy to extend with your own gem ★ Use other frameworks (960gs, suzy, YUI, YAML, jqTouch, …) ★ Write own frameworks
  23. 23. SCSS > DRY CSS Compass > Simple CCS3 Lemonade > Easy Sprites
  24. 24. gem install lemonade
  25. 25. 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)
  26. 26. Output .add { background: url("icons.png"); } .remove { background: url("icons.png") 0 -16px; }
  27. 27. Right Aligned .something { background: sprite-image("i/wide.png"); } a.next { background: yellow no-repeat sprite-image("i/n.png", 100%); padding-right: 20px; }
  28. 28. Result .something { background: url("i.png"); } Example link a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px; }
  29. 29. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px; }
  30. 30. Could be Better .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -16px; padding: 20px; }
  31. 31. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }
  32. 32. Just Perfect .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -36px; padding: 20px; }
  33. 33. 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;
  34. 34. Any questions?
  35. 35. Happy forking: http://github.com/nex3/haml http://github.com/chriseppstein/compass http://github.com/hagenburger/lemonade
  36. 36. 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
  37. 37. last name first name nico@hagenburger.net e-mail twitter blog

×