Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

3 Steps to Make Better & Faster Frontends

6.768 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Kunst & Fotos, Technologie
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×