melp.nl

CSS sprites are pretty useful in web development. The general idea is you use one big image that contains all your icons and other interface-related images and use that image as a background for your HTML elements, shifting it's position such that the right portion of the sprite is displayed.

This technique is becoming more and more popular, but the setting up of sprites can be a time consuming process. Spritzer is a little tool that can help you do the job so you have extra time for more fun things.

Sprite configuration

Configuration is done through a single sprite file, containing a layout, a tile size and a list of images and css selectors to generate. Here is an example:

@tile 32x32

@table
a     b      
   c

@images
a = warning.png:    .warning
b = geek.png:       .geek
c = facebook.png:   .facebook

The @tile directive

This directive configures the tile size. Each character in the table is represented by a 32 x 32 square tile.

The @table directive

The table defines the layout for the sprite. In the above example, there are two rows. The first row defines 7 tiles, of wich the first tile is referenced as image a, and the last as image b. The second row contains only image c, right in the middle at the fourth tile.

The @images directive

The images directive shows a list of what each character in the table above represents. The format is

a = image.png: css-selector

The CSS selector is used for generating CSS, the image.png is used for generating the sprite.

An optional @imageDir directive

Is used to supply a path to where all images are.

The PHP script

The following PHP script renders the sprite configuration into an example.png file and an example.css CSS file:

#!php
<?php
require_once dirname(__FILE__) . '/../lib/Spritzer/autoload.php';
$parser = new Spritzer_Parser('example.sprite');
$config = $parser->parse();
$config->image()->writeTo('./example.png');
$config->css('./example.png')->writeTo('./example.css');

Using the above example, the following sprite image would be generated:

The following CSS would be generated:

#!css
.warning { background: url(./example.png) 0px 0px no-repeat; }
.geek { background: url(./example.png) -192px 0px no-repeat; }
.facebook { background: url(./example.png) -96px -32px no-repeat; }

Effectively, the CSS positions the sprite at the top left corner of each image in the sprite, identified by the CSS selector configured in the sprite file.

See the example in action.

Practical usage

Spritzer can easily be integrated into your application generating sprites on-the-fly, or you could easily build a command line script (or even VCS hook) to generate sprites for you. At the very least, it would make reconfiguring your sprites a lot easier, with a lot less typing, measuring and slicing to do.

Check it out on github and go nuts!. Nuts go good with spritzers, I hear. Baddam tsj! Ahem :|

If you got good contributions, fork and go crazy. :)