README.rdoc

March 23, 2011 · View on GitHub

= CSS Spriter, a sprite generator

[ PNG, PNG, PNG ] (°_°) [ PNG, PNG, PNG ] (° ) [ PNG, PNG, PNG ] )°) [ PNG, PNG, )°) [ PNG, )°) [ )°)

(°_°)/ -> SPRITES!!!

== Description

It takes your PNG's, chews them up and spits out sprites!

point bin/css-spriter at a directory, and watch it sprite away!

CSS-Spriter uses Chunky PNG for it's PNG manipulation. Not only is it super fast, but the library is a great example of fast, efficient ruby programming.

Chunky PNG is written in pure ruby, this means you can sprite up anything using MRI, JRuby, or Rubinius.

== Installation - standalone

sudo gem install css-spriter

=== Usage - standalone

css-spriter

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:

css-spriter -h

== Installation - Rails plugin

script/plugin install git://github.com/aberant/css-spriter.git

=== Usage - Rails plugin

CSS-Spriter 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 the sprite:generate task 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 CSS-Spriter can do without doing any work.

== Features

  • 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 mixing RGB and RGBA color types

== Roadmap - by priority

  • allow a global css template override
  • allow per-sprite and global configuration

== Authors

  • aberant - Colin Harris
  • tjennings - Tyler Jennings

== Credits