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

  • 5,653 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.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,653
On Slideshare
4,801
From Embeds
852
Number of Embeds
6

Actions

Shares
Downloads
63
Comments
0
Likes
9

Embeds 852

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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