Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

3 Steps to Make Better & Faster Frontends

6.989 visualizaciones

Publicado el

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

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/369VOVb ❶❶❶
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sex in your area is here: ♥♥♥ http://bit.ly/369VOVb ♥♥♥
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • 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,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×