pure ruby CSS Sprite generator
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
examples/sprites
lib
spec
tasks
.gitignore
MIT-LICENSE
README.rdoc
Rakefile
VERSION
css-spriter.gemspec
init.rb

README.rdoc

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 <directory>

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

  • thanks to mattpuchlerz for the socially acceptable project name