Introducing Spritzer: A CSS sprite generator

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

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

This entry was posted in Development and tagged , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.

6 Comments

  1. Edwin van Vliet
    Posted January 23, 2011 at 15:17 | Permalink

    Funny, this is pretty much something I had in mind for a while.

    Using the “background” shortcut may be a bit dangerous in combination with other stylesheets and broken CSS implementations. You might want to (optionally?) add !important so that there is a smaller chance of an end user breaking the sprite by using more specific selectors. And maybe break up into background-image, background-position, etc. (also optionally).

    I also feel it shoudn’t be grid based. I think you should rather use some kind of algorithm that generates a relatively efficient image size and determines the coördinates itself. This would mean you could do with less configuration and just make a list of images which should be in the sprite. No more @tile and @table, I think those don’t really add functionality, instead they are limiting.

    • drm
      Posted January 23, 2011 at 16:31 | Permalink

      I think background-rules shouldn’t be used in conjunction with the sprites, but you are right. I made a little modification adding a template parameter to the css constructor. The CSS implementation was already injectable as the second parameter to the css() method:

      $css = new Spritzer_Css(Spritzer_Css::EXPANDED_TEMPLATE);
      $config->css('../images/sprite.png', $css)->writeTo('css/example.css');
      

      The grid is intentional. I’d want full control over the sprite’s layout, that’s the reason I chose this setup in the first place.

  2. Bas
    Posted January 23, 2011 at 18:43 | Permalink

    Nice approach! This article might come in handy:

    http://nicolasgallagher.com/css-background-image-hacks/

    It is on background images / sprites and how you can avoid large pieces of empty background.

  3. Posted March 31, 2013 at 06:12 | Permalink

    Hello! Do you know if they make any plugins to help with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results. If you know of any please share. Many thanks!

  4. Posted April 2, 2013 at 16:13 | Permalink

    Excellent beat ! I wish to apprentice while you amend your site, how can i subscribe for a blog site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept

    my web site – [storage](http://www.unisoncreations.ca/index. php?option=com_blog&view=comments&pid=230&Itemid=0 “storage”)

  5. Posted April 19, 2014 at 01:20 | Permalink

    Thanks for finally talking about >Introducing Spritzer: A CSS sprite generator <Loved it!

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Subscribe without commenting