glue's Introduction

Glue

Glue is a simple command line tool to generate CSS sprites:

$ glue source output

The latest documentation is available at: http://glue.readthedocs.org
Installation instructions: http://glue.readthedocs.org/en/latest/installation.html

Features

Automatic Sprite (PNG+CSS) creation.
Automatic multi-dpi retina sprite creation.
Support for multi-sprite projects.
Multiple algorithms available.
Automatic crop of unnecessary transparent borders around source images.
Configurable paddings per image, sprite or project.
Watch option to keep glue running watching for file changes.
Optional .less output format.
Automatic sprite images post-processing using OptiPNG.
Sprite- and Project-level configuration via static config files.
Configurable cache busting for sprite images.
Customizable output css templates.
Customizable CSS class names.

Example

Using the gorgeous famfamfam icons (4.2Mb) you will get the following icons.png (401Kb).

And also an icons.css with all the necessary CSS classes for this sprite:

.sprite-icons-zoom_out{ background:url('icons.png'); top:0; left:0; no-repeat;}
.sprite-icons-zoom_in{ background:url('icons.png'); top:0; left:-16; no-repeat;}
.sprite-icons-zoom{ background:url('icons.png'); top:-16; left:0; no-repeat;}
.sprite-icons-xhtml_valid{ background:url('icons.png'); top:-16; left:-16; no-repeat;}
...

Do you want to know more? Visit the quickstart guide: http://glue.readthedocs.org/en/latest/quickstart.html

Recommend Projects