3 Steps to Make Better & Faster Frontends
Nächste SlideShare
Wird geladen in ...5
×

Das gefällt Ihnen? Dann teilen Sie es mit Ihrem Netzwerk

Teilen

3 Steps to Make Better & Faster Frontends

  • 5,648 Views
Uploaded 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.

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

  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Be the first to comment
No Downloads

Views

Gesamtviews
5,648
Bei Slideshare
4,797
Aus Einbettungen
851
Anzahl an Einbettungen
6

Aktionen

Geteilt
Downloads
63
Kommentare
0
Gefällt mir
9

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

Inhalte melden

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

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

Löschen
    No notes for slide

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