h1. css_sprite

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

**************************************************************************

h2. Install

install rmagick gem first:
<pre><code>
sudo gem install rmagick
</code></pre>

if you have any problems with the rmagick gem, install imagemagick via macports first:

<pre><code>
sudo port install libxml2
sudo port install ImageMagick  
</code></pre>

or via installer: <a href="http://github.com/maddox/magick-installer/tree/master">http://github.com/maddox/magick-installer/tree/master</a>


install it as a gem:

<pre><code>
sudo gem sources -a http://gemcutter.org
sudo gem install css_sprite
</code></pre>

or install it as a plugin:
<pre><code>
script/plugin install git://github.com/flyerhzm/css_sprite.git
</code></pre>

**************************************************************************

h2. Configuration

add <code>config/css_sprite.yml</code>, define about compositing what images.
<pre><code>
forum_icon_vertical.gif:  # destination image file
  sources:                # source image file list
    - good_topic.gif
    - mid_topic.gif
    - unread_topic.gif
    - sticky_topic.gif
  orient: vertical        # composite gravity, vertical or horizontal
  span: 5                 # span of space between two images
</code></pre>

first line defines the destination image filename.
<code>sources</code> is a list of source image filenames what want to composite. They are parsed by <code>Dir.glob</code>.
<code>orient</code> defines the composite gravity type, horizontal or vertical. Default is 'vertical'.
<code>span</code> defines the span between two images. Default is 0.

you can define any number of destination image files.

**************************************************************************

h2. Usage

if you use it as a gem, add a task <code>lib/tasks/css_sprite.rake</code> first:
<pre><code>
require 'css_sprite'
</code></pre>
if you use it as a plugin, ignore the step above.

then just run rake task:
<pre><code>
rake css_sprite:build
</code></pre>

the result css is generated at <code>public/stylesheets/css_sprite.css</code>
<pre><code>
.good_topic {
    background: url('/images/forum_icon_vertical.gif') no-repeat 0px 0px;
    width: 20px;
    height: 19px;
}
.mid_topic {
    background: url('/images/forum_icon_vertical.gif') no-repeat 0px 24px
    width: 20px;
    height: 19px;
}
.unread_topic {
    background: url('/images/forum_icon_vertical.gif') no-repeat 0px 48px;
    width: 19px;
    height: 18px;
}
.sticky_topic {
    background: url('/images/forum_icon_vertical.gif') no-repeat 0px 71px;
    width: 19px;
    height: 18px;
}
</code></pre>

**************************************************************************

h2. Contributor

josedelcorral - fix the style of generated css

**************************************************************************


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