3 ways-to-create-sprites-in-rails
TRANSCRIPT
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
http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html
Finally!
Using Images<%= sprite_tag("icons/trash") %>
★ Adds a HTML tag with the class
(I guess it works this way.)
Questions★ Is it possible to pack CSS files?
★ Why “icons/trash” if image_tag requires “icons/trash.png”?
★ When will it be available?
Features★ Creates sprite images
★ Creates classes for each file
★ Sass compatible
★ Rake Task for generation
From Image to CCSimages 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
Cons★ A lot of CSS generated (sizes, …)
★ Additional non-semantic tags
★ Additional classes
★ Positioned background images difficult
★ RMagick
★ Rake task
Alternatives★ http://github.com/gistinc/sprite
based on css_sprite
★ http://github.com/sblackstone/auto_spriteimage_tag extention + CSS classes
★ http://github.com/setepo/css-spritesimage_tag extention + inline CSS
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)
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");}a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px;}
Example link
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 { background: url("icons.png") 0 -16px; padding: 20px;}
Example link
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 { background: url("icons.png") 0 -36px; padding: 20px;}
Example link
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;
Happy forking:http://github.com/flyerhzm/css_sprite
http://github.com/hagenburger/lemonade