Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Big Frontends Made Simple
Next
Upcoming SlideShare
Big Frontends Made Simple
Next
Download to read offline and view in fullscreen.

Share

3 Steps to Make Better & Faster Frontends

Download to read offline

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

  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
  • DevanandAle

    Jul. 15, 2015
  • sunghwankim01

    Feb. 21, 2015
  • kukukukikii

    Jul. 30, 2012
  • webinn

    Jan. 11, 2012
  • beausmith

    Oct. 3, 2011
  • baijerry

    Aug. 2, 2011
  • zenMonkey

    Dec. 23, 2010
  • hlb

    Nov. 8, 2010
  • dreq72

    Sep. 20, 2010
  • humoody

    Jul. 27, 2010
  • jtibu

    Jul. 3, 2010

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

Views

Total views

7,418

On Slideshare

0

From embeds

0

Number of embeds

869

Actions

Downloads

70

Shares

0

Comments

0

Likes

11

×