3 ways-to-create-sprites-in-rails
?
11 likes?9,400 views
The document discusses different ways to create CSS sprites in Rails applications. It describes image sprites and how they can improve website performance by reducing HTTP requests. It then provides information on the integrated sprite support in Rails 3.1, the css_sprite gem for generating sprites, and the lemonade gem which provides an easy way to generate sprites. It includes code examples and discusses pros and cons of different sprite approaches.
3 ways-to-create-sprites-in-rails
- 1. 3 Ways to Create CSS Sprites With Rails
- 3. A great way to save HTTP requests.
- 4. In other words: Something that makes your website faster. awes om e!
- 6. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
- 7. Finding Information http://www.drdobbs.com/blog/archives/2010/06/preparing_for_r.html
- 9. A Piece of Code http://twitter.com/jsiarto/status/15861245321
- 10. Finally! http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html
- 11. Generation Sprites <%= sprite_css("icons") %> ¡ï Combines all images of a folder ¡ï Generates CSS
- 12. Using Images <%= sprite_tag("icons/trash") %> ¡ï Adds a HTML tag with the class (I guess it works this way.)
- 13. Questions ¡ï Is it possible to pack CSS files? ¡ï Why ¡°icons/trash¡± if image_tag requires ¡°icons/trash.png¡±? ¡ï When will it be available?
- 14. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
- 16. Features ¡ï Creates sprite images ¡ï Creates classes for each file ¡ï Sass compatible ¡ï Rake Task for generation
- 17. 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
- 18. Built Sprites (1) rake css_sprite:build
- 19. Built Sprites (2) rake css_sprite:start
- 20. Pros ¡ï Easy for HTML developers ¡ï Easy if you¡¯re handling <img> tag
- 21. Cons ¡ï A lot of CSS generated (sizes, ¡) ¡ï Additional non-semantic tags ¡ï Additional classes ¡ï Positioned background images difficult ¡ï RMagick ¡ï Rake task
- 22. 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
- 23. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Easy Sprites
- 26. 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)
- 27. Output .add { background: url(/slideshow/3-waystocreatespritesinrails/4909207/"icons.png"); } .remove { background: url(/slideshow/3-waystocreatespritesinrails/4909207/"icons.png") 0 -16px; }
- 28. Right Aligned .something { background: sprite-image("i/wide.png"); } a.next { background: yellow no-repeat sprite-image("i/n.png", 100%); padding-right: 20px; }
- 29. Result .something { background: url(/slideshow/3-waystocreatespritesinrails/4909207/"i.png"); } Example link a.next { background: yellow no-repeat url(/slideshow/3-waystocreatespritesinrails/4909207/"i.png") 100% -20px; padding-right: 20px; }
- 30. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px; }
- 31. Could be Better .add { background: url(/slideshow/3-waystocreatespritesinrails/4909207/"icons.png"); } .remove { Example link background: url(/slideshow/3-waystocreatespritesinrails/4909207/"icons.png") 0 -16px; padding: 20px; }
- 32. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }
- 33. Just Perfect .add { background: url(/slideshow/3-waystocreatespritesinrails/4909207/"icons.png"); } .remove { Example link background: url(/slideshow/3-waystocreatespritesinrails/4909207/"icons.png") 0 -36px; padding: 20px; }
- 34. 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;
- 35. Any questions?
- 37. last name first name nico@hagenburger.net e-mail twitter blog