• Teilen
  • E-Mail
  • Einbetten
  • Gefällt mir
  • Speichern
  • Privater Inhalt
3 Steps to Make Better & Faster Frontends
 

3 Steps to Make Better & Faster Frontends

on

  • 5,374 Views

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.

Statistiken

Views

Gesamtviews
5,374
Views auf SlideShare
4,526
Views einbetten
848

Actions

Gefällt mir
9
Downloads
62
Kommentare
0

6 Einbettungen 848

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

Zugänglichkeit

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

    3 Steps to Make Better & Faster Frontends 3 Steps to Make Better & Faster Frontends Presentation Transcript

    • 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: desaturate(red, 50%); }
    • 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)
    • RGBA Colors h2 { background: rgba(#00f, 0.7); } R, G, B #hex colorconst $variables
    • 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, *.scss span color: blue *.sass
    • More to Learn ★ Include partials (no asset packer needed) ★ Auto compress CSS files ★ @if, @for, @while syntax ★ “&” as current cascading placeholder
    • 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.5), 3px, 3px, 5px)); }
    • 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, …) ★ Write own frameworks
    • 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/rm.png"); } all icons by p.yusukekamiyamane.com (CC by 3.0)
    • 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 sprite-image("i/n.png", 100%); padding-right: 20px; }
    • Result .something { background: url("i.png"); } Example link a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px; }
    • Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px; }
    • Could be Better .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -16px; padding: 20px; }
    • Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }
    • Just Perfect .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -36px; padding: 20px; }
    • 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;
    • 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-Sprites-for-Sass- Compass.html
    • last name first name nico@hagenburger.net e-mail twitter blog