sprightly

Sprightly reads multiple images, writes a sprite, and writes CSS to simplify using that sprite in a browser.

npm install sprightly
1 downloads in the last week
1 downloads in the last month

Sprightly

Sprightly reads multiple images, writes a sprite, and writes CSS to simplify using that sprite in a browser.

Requirements

node-canvas requires the cairo graphics library version >= 1.8.6.

I've tested on Mac OS X 10.7.2 with Node.js 0.6.7.
It probably works just as well in other environments supported by Node.js, cario, and node-canvas.

Installation

With npm:

$ npm install https://github.com/jjavery/sprightly/tarball/master

Places the sprightly command in ./node_modules/sprightly/bin

Examples

Show help:

$ sprightly --help

Usage: sprightly [options]

Options:
    --help, -h          : show help                                                                                                                                                           
    --image, -i <class>:<file> : a css class and image filename to include in the sprite
                                 example: --image my-icon:my_icon_32.png                                     
    --json, -j <file>   : the filename of a JSON file containing css class and
                          image filename pairs
                          example JSON: { "my-icon": "my_icon_32.png" }
    --css, -c <file>    : the filename of the output CSS image map                                                                                                                     
    --sprite, -s <file> : the filename of the output PNG image                                                                                                                         
    --class, -l <class> : an optional css class that defines the background-image
                               url in the output CSS image map                                                  
    --padding, -p <int> : padding space between images, in pixels                                                                                                                       
    --debug, -d         : enable debugging information

Basic usage:

$ sprightly --image tree:tree.png --image ball:ball.png --image bird:bird.png --sprite sprite.png --css sprite.css 

Combines tree.png, ball.png, and bird.png into sprite.png and writes sprite.css which contains something like:

.tree
{
    background-image: url("sprite.png");
    background-position: -10px -10px;
    width: 32px;
    height: 32px;
    display: inline-block;
}

.ball
{
    background-image: url("sprite.png");
    background-position: -10px -52px;
    width: 32px;
    height: 32px;
    display: inline-block;
}

.bird
{
    background-image: url("sprite.png");
    background-position: -10px -94px;
    width: 32px;
    height: 32px;
    display: inline-block;
}

Which works with HTML like this:

<!DOCTYPE html>
<html>
    <head>
        <title>sprightly example</title>
        <link rel="stylesheet" href="sprite.css"/>
    </head>
    <body>
        <p>
            <span class="tree"></span>
            <span class="ball"></span>
            <span class="bird"></span>
        </p>
    </body>
</html>

Better usage:

$ sprightly --json sprite-medium.json --sprite sprite-medium.png --css sprite-medium.css --class medium
$ sprightly --json sprite-large.json  --sprite sprite-large.png  --css sprite-large.css  --class large

Where sprite-medium.json contains something like this:

{
    "tree": "tree-medium.png",
    "ball": "ball-medium.png",
    "bird": "bird-medium.png"
}

And sprite-large.json contains something like this:

{
    "tree": "tree-large.png",
    "ball": "ball-large.png",
    "bird": "bird-large.png"
}

And because we've supplied --class medium, sprite-medium.css contains something like this:

.medium .tree,
.tree
{
    background-image: url("sprite-medium.png");
    background-repeat: no-repeat;
    background-position: -10px -10px;
    width: 32px;
    height: 32px;
    display: inline-block;
}

.medium.tree
{
    background-image: url("sprite-medium.png") !important;
    background-position: -10px -10px !important;
    width: 32px !important;
    height: 32px !important;
}

.medium .ball,
.ball
{
    background-image: url("sprite-medium.png");
    background-repeat: no-repeat;
    background-position: -10px -52px;
    width: 32px;
    height: 32px;
    display: inline-block;
}

.medium.ball
{
    background-image: url("sprite-medium.png") !important;
    background-position: -10px -52px !important;
    width: 32px !important;
    height: 32px !important;
}

.medium .bird,
.bird
{
    background-image: url("sprite-medium.png");
    background-repeat: no-repeat;
    background-position: -10px -94px;
    width: 32px;
    height: 32px;
    display: inline-block;
}

.medium.bird
{
    background-image: url("sprite-medium.png") !important;
    background-position: -10px -94px !important;
    width: 32px !important;
    height: 32px !important;
}

And sprite-large.css contains something similar, but references the larger images, which works with HTML like this:

<!DOCTYPE html>
<html>
    <head>
        <title>sprightly example</title>
        <link rel="stylesheet" href="sprite-medium.css"/>
        <link rel="stylesheet" href="sprite-large.css"/>
    </head>
    <body>
        <p class="medium">
            <span class="tree"></span>
            <span class="large ball"></span>
            <span class="bird"></span>
        </p>
    </body>
</html>
npm loves you