3 Ways to Create
  CSS Sprites
   With Rails
What Are Image
Sprites?
A great way to save
  HTTP requests.
In other words:

 Something that
makes your website
     faster. awes om
                     e!
Rails 3.1 > Integrated Spriting
CSS_Sprite > better <img>
Lemonade > Full CSS sprites
Finding Information




  http://www.drdobbs.com/blog/archives/2010/06/preparing_for_r.html
Few Information




http://blog.endpoint.com/2010/06/rails-3-at-railsconf-2010-code-goodness.html
A Piece of Code




   http://twitter.com/jsiarto/status/15861245321
Finally!


   http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html
Generation Sprites
<%= sprite_css("icons") %>



★   Combines all images of a folder
★   Generates CSS
Using Images
<%= sprite_tag("icons/trash") %>



★   Adds a HTML tag with the class
                (I guess it works this...
Questions
★   Is it possible to pack CSS files?
★   Why “icons/trash” if image_tag requires
    “icons/trash.png”?
★   Whe...
Rails 3.1 > Integrated Spriting
CSS_Sprite > better <img>
Lemonade > Full CSS sprites
gem install
css_sprite
Features
★   Creates sprite images
★   Creates classes for each file
★   Sass compatible
★   Rake Task for generation
From Image to CCS
images under css_sprite directory                             class name in css_sprite css

twitter_icon...
Built Sprites (1)
rake css_sprite:build
Built Sprites (2)
rake css_sprite:start
Pros
★   Easy for HTML developers
★   Easy if you’re handling <img> tag
Cons
★   A lot of CSS generated (sizes, …)
★   Additional non-semantic tags
★   Additional classes
★   Positioned backgrou...
Alternatives
★   http://github.com/gistinc/sprite
    based on css_sprite
★   http://github.com/sblackstone/auto_sprite
  ...
Rails 3.1 > Integrated Spriting
CSS_Sprite > better <img>
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/flyerhzm/css_sprite
http://github.com/hagenburger/lemonade
last name
first name


             nico@hagenburger.net
    e-mail
              twitter
                        blog
3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-rails
Nächste SlideShare
Wird geladen in ...5
×

3 ways-to-create-sprites-in-rails

10,959

Published on

Published in: Technologie
2 Kommentare
11 Gefällt mir
Statistiken
Notizen
Keine Downloads
Views
Gesamtviews
10,959
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
37
Kommentare
2
Gefällt mir
11
Einbettungen 0
No embeds

No notes for slide

3 ways-to-create-sprites-in-rails

  1. 1. 3 Ways to Create CSS Sprites With Rails
  2. 2. What Are Image Sprites?
  3. 3. A great way to save HTTP requests.
  4. 4. In other words: Something that makes your website faster. awes om e!
  5. 5. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
  6. 6. Finding Information http://www.drdobbs.com/blog/archives/2010/06/preparing_for_r.html
  7. 7. Few Information http://blog.endpoint.com/2010/06/rails-3-at-railsconf-2010-code-goodness.html
  8. 8. A Piece of Code http://twitter.com/jsiarto/status/15861245321
  9. 9. Finally! http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html
  10. 10. Generation Sprites <%= sprite_css("icons") %> ★ Combines all images of a folder ★ Generates CSS
  11. 11. Using Images <%= sprite_tag("icons/trash") %> ★ Adds a HTML tag with the class (I guess it works this way.)
  12. 12. Questions ★ Is it possible to pack CSS files? ★ Why “icons/trash” if image_tag requires “icons/trash.png”? ★ When will it be available?
  13. 13. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
  14. 14. gem install css_sprite
  15. 15. Features ★ Creates sprite images ★ Creates classes for each file ★ Sass compatible ★ Rake Task for generation
  16. 16. From Image to CCS images under css_sprite directory class name in css_sprite css twitter_icon.png .twitter_icon facebook_icon.png .facebook_icon hotmail-logo.png .hotmail-logo gmail-logo.png .gmail-logo icons/twitter_icon.png .icons .twitter_icon widget/icons/twitter_icon.png .widget .icons .twitter_icon twitter_icon_hover.png .twitter_icon:hover twitter-icon-hover.png .twitter-icon:hover logos_hover/gmail_logo.png .logos:hover .gmail_logo logos-hover/gmail-logo.png .logos:hover .gmail-logo … … full table at http://github.com/flyerhzm/css_sprite
  17. 17. Built Sprites (1) rake css_sprite:build
  18. 18. Built Sprites (2) rake css_sprite:start
  19. 19. Pros ★ Easy for HTML developers ★ Easy if you’re handling <img> tag
  20. 20. Cons ★ A lot of CSS generated (sizes, …) ★ Additional non-semantic tags ★ Additional classes ★ Positioned background images difficult ★ RMagick ★ Rake task
  21. 21. Alternatives ★ http://github.com/gistinc/sprite based on css_sprite ★ http://github.com/sblackstone/auto_sprite image_tag extention + CSS classes ★ http://github.com/setepo/css-sprites image_tag extention + inline CSS
  22. 22. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Easy Sprites
  23. 23. gem install lemonade
  24. 24. 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)
  25. 25. Output .add { background: url("icons.png"); } .remove { background: url("icons.png") 0 -16px; }
  26. 26. Right Aligned .something { background: sprite-image("i/wide.png"); } a.next { background: yellow no-repeat sprite-image("i/n.png", 100%); padding-right: 20px; }
  27. 27. Result .something { background: url("i.png"); } Example link a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px; }
  28. 28. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px; }
  29. 29. Could be Better .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -16px; padding: 20px; }
  30. 30. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }
  31. 31. Just Perfect .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -36px; padding: 20px; }
  32. 32. 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;
  33. 33. Any questions?
  34. 34. Happy forking: http://github.com/flyerhzm/css_sprite http://github.com/hagenburger/lemonade
  35. 35. last name first name nico@hagenburger.net e-mail twitter blog
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×