3 Ways to Create CSS SpritesWith Rails

What Are Image Sprites?

A great way to save HTTP requests.

Something that makes your website

faster.

In other words:

awesome!

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

http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html

Finally!

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 way.)

Questions★ Is it possible to pack CSS files?

★ Why “icons/trash” if image_tag requires “icons/trash.png”?

★ When will it be available?

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 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

Built Sprites (1)rake css_sprite:build

Built Sprites (2)rake css_sprite:start

★ Easy for HTML developers

★ Easy if you’re handling <img> tag

Pros

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

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/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");}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;

Any questions?

Happy forking:http://github.com/flyerhzm/css_sprite

http://github.com/hagenburger/lemonade

nico@hagenburger.nete-mail

twitter

blog

first name

last name