Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
pure ruby CSS Sprite generator
Ruby
tree: 47946707c1

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
bin
examples
lib
spec
tasks
.gitignore
MIT-LICENSE
README.rdoc
Rakefile
VERSION
init.rb
spriter.gemspec

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!

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

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.

Limitations

  • does not support color profiles (can cause a slight change in color from the source image)

  • does not support reading interlaced PNGs.

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

Authors

  • aberant - Colin Harris

  • tjennings - Tyler Jennings

Credits

  • thanks to mattpuchlerz for the socially acceptable project name

Something went wrong with that request. Please try again.