CSS Spriter, a sprite generator
[ PNG, PNG, PNG ] (°_°) [ PNG, PNG, PNG ] (° ) [ PNG, PNG, PNG ] )°) [ PNG, PNG, )°) [ PNG, )°) [ )°) \(°_°)/ -> SPRITES!!!
It takes your PNG's, chews them up and spits out sprites!
point bin/css-spriter at a directory, and watch it sprite away!
Installation - standalone
sudo gem install css-spriter
Usage - standalone
If you point the sprite command at a directory tree by default it will construct sprites for each of the sub directories and generate a single css to access all of the sprites which is placed in the root of the directory tree
For a full list of options:
Installation - Rails plugin
script/plugin install git://github.com/aberant/css-spriter.git
Usage - Rails plugin
Spittle assumes all of your sprites are located in the directory public/images/sprites. This directory should contain sub-directories for each sprite you wish to create. The css class names for an image in a sprite will take the form <directory_name>_<image_name>. Here is an example:
sprites / cars / ford.png chevy.png planes / boeing.png cesna.png
Running sprite:generate does all the work. Each sprite directory (cars, planes) will now contain a sprite.png. Spittle will also generate a sprites.css stylesheet in public/stylesheets/ that you should include in your layout. If you wished to use the ford image from the cars sprite you would give the 'cars_ford' class to the desired element in the view. That's it!
Check out examples/sprites if you want to see what spriter can do without doing any work.
does not support color profiles (can cause a slight change in color from the source image)
does not support reading interlaced PNGs.
automatically generates sprites from a set of PNG images
automatically generates css classes to access images within the sprite
customizable css templates
Rails plugin & rake tasks (sprite:generate & sprite:cleanup)
Supports varying dimensions in source images
Does not regenerate sprites that have not changed
Supports all PNG filter types to improve image compression
supports mixing RGB and RGBA color types
Roadmap - by priority
Reading interlaced images
allow a global css template override
allow per-sprite and global configuration
aberant - Colin Harris
tjennings - Tyler Jennings
thanks to mattpuchlerz for the socially acceptable project name