automatically css sprite.
I have rewritten the plugin. Please check out the gem version >= 1.3.0
css_sprite depends on the
rmagick gem, please make sure RMagick is successfully installed on your system.
install css_sprite as a gem:
sudo gem install css_sprite
or install css_sprite as a plugin:
script/plugin install git://github.com/flyerhzm/css_sprite.git
1. create a directory whose name is css_sprite or ends with css_sprite (e.g. widget_css_sprite) under
2. if you install the css_sprite as a gem, you should add css_sprite task in Rakefile
If you install it as a plugin, you can skip this step
config/css_sprite.yml, it is not necessary by default.
3. start css_sprite server
4. put any images which you need to do the css sprite under the css_sprite directory, then you will see the automatically generated css sprite image and css files.
5. include the stylesheet in your view page
<%= stylesheet_link_tag 'css_sprite' %>
You can stop the css_sprite server by
Or you can just do the css sprite manually by
There is no need to create any configuration by default. If you want to use sass or you want to define common styles for some related classes, you need to define
- For css
suffix: button: | text-indent: -9999px; display: block; cursor: pointer; font-size: 0; line-height: 15px; border: 0; outline: 0; icon: | text-indent: -9999px; cursor: pointer;
- For sass
engine: sass suffix: button: | text-indent: -9999px display: block cursor: pointer font-size: 0 line-height: 15px border: 0 outline: 0 icon: | text-indent: -9999px cursor: pointer
engine defines css (default) or sass file to generate.
suffix defines the customization styles for specified images.
The customization above means if your image filename is button suffixed (e.g. post_button.png), the corresponding class .post_button has the additional style with (outline: 0; border: 0; and so on),
if your image filename is icon suffixed (e.g. twitter_icon.png), the correspondiing class .twitter_icon has the additional style with (text-indent: -9999px; cursor: pointer)
I have written a post css sprite best practices to introduce the idea that the css_sprite gem follows.
Copyright © 2009 [Richard Huang (firstname.lastname@example.org)], released under the MIT license