Se ha denunciado esta presentación.

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

11

Compartir

Cargando en…3
×
1 de 37
1 de 37

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

11

Compartir

Descargar para leer sin conexión

Transcripción

  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

Transcripción

  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

Más Contenido Relacionado

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

×