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:
     ...
Color Functions
★ opacify(color, amount)
★ transparentize(color, amount)

★ lighten(color, amount)

★ darken(color, amount...
RGBA Colors
h2 {
  background: rgba(#00f, 0.7);
}
                   R, G, B
                   #hex
                 colo...
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,   ...
More to Learn
★   Include partials
    (no asset packer needed)
★   Auto compress CSS files
★   @if, @for, @while syntax
★...
SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites
gem install
  compass
CSS3
@import "compass";

.box {
  background: red;
  @include border-radius(4px);
  @include box-shadow(
    rgba(#ccc, 0....
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, …)
★   W...
SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites
gem install
 lemonade
Simple Sprites
.add {
  background:
    sprite-image("icons/pl.png");
}

.remove {
  background:
    sprite-image("icons/r...
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
    spr...
Result
.something {
  background:
    url("i.png");
}
                  Example link
a.next {
  background: yellow no-repe...
Empty Space
.add {
  background:
    sprite-image("icons/pl.png");
}
.remove {
  background: yellow no-repeat
    sprite-i...
Could be Better
.add {
  background:
    url("icons.png");
}
.remove {             Example link
  background:
    url("ico...
Empty Space
.add {
  background:
    sprite-image("icons/pl.png");
}
.remove {
  background: yellow no-repeat
    sprite-i...
Just Perfect
.add {
  background:
    url("icons.png");
}
.remove {             Example link
  background:
    url("icons....
Sprite Generation
★   Sprite image named by directory:
    “icons/*.png” > “icons.png”

★   Background position added only...
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...
last name
first name


             nico@hagenburger.net
    e-mail
              twitter
                        blog
Upcoming SlideShare
Loading in...5
×

3 Steps to Make Better & Faster Frontends

4,920

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
4,920
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
65
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×