3 Steps to Make Better & Faster Frontends
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

3 Steps to Make Better & Faster Frontends

am

  • 5,577 Views

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

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

Statistiken

Views

Gesamtviews
5,577
Views auf SlideShare
4,726
Views einbetten
851

Actions

Gefällt mir
9
Downloads
63
Kommentare
0

6 Einbettungen 851

http://www.hagenburger.net 768
http://blog.youmila.com 44
http://localhost 17
http://www.helpified.com 15
https://helpified.com 6
http://www.slideshare.net 1

Zugänglichkeit

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

3 Steps to Make Better & Faster Frontends Presentation Transcript

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