1. 3 Ways to Create
CSS Sprites
With Rails

2. What Are Image
Sprites?

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

8. Few Information
http://blog.endpoint.com/2010/06/rails-3-at-railsconf-2010-code-goodness.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

15. gem install
css_sprite

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

25. gem install
lemonade

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("icons.png");
}
.remove {
background:
url("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("i.png");
}
Example link
a.next {
background: yellow no-repeat
url("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("icons.png");
}
.remove { Example link
background:
url("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("icons.png");
}
.remove { Example link
background:
url("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?

36. Happy forking:
http://github.com/flyerhzm/css_sprite
http://github.com/hagenburger/lemonade

37. last name
first name
nico@hagenburger.net
e-mail
twitter
blog