css_sprite

A rails plugin/gem to generate css sprite images automatically.

---

Notice

I have rewritten the plugin. Please check out the gem version >= 1.2.0

---

Install

css_sprite is dependent on the RMagick gem, please install it first.

install it as a gem:

sudo gem install css_sprite

or install it as a plugin:

script/plugin install git://github.com/flyerhzm/css_sprite.git

---

Configuration

There is no need to create a configuration if you do not use sass and you do not do any customization.

You can create config/css_sprite.yml to define the customization.

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 to generate.
suffix defines the customization styles for specified images.
The customization above means if your image’s suffix is button (e.g. post_button.png), it contains the additional style with (outline: 0 and so on),
if your image’s suffix is icon (e.g. twitter_icon.png), it contains the additional style with (text-indent: -9999px and so on)

---

Usage

1. create a css_sprite directory or css_sprite suffixed directory (e.g. widget_css_sprite) under public/images

2. define config/css_sprite.yml or not

3. start css_sprite server rake css_sprite:start

4. put any images you want to do css sprite into the css_sprite directory

5. then css_sprite image will be automatically generated and css_sprite.css or css_sprite.sass are generated too.

---

Task

require 'css_sprite'

if you use it as a plugin, ignore the step above.

then just run rake task:
rake css_sprite:start, start css_sprite server
rake css_sprite:stop, stop css_sprite server
rake css_sprite:build, build css_sprite once

---

Contributor

josedelcorral – fix the style of generated css
Santino – fix transparent images and make the generated css file more graceful

---

Copyright © 2009 [Richard Huang (flyerhzm@gmail.com)], released under the MIT license