Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Grunt library for creating spritesheets and their coordinates
branch: master

This branch is 527 commits behind Ensighten:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
src-test
src
tasks
.gitignore
LICENSE-MIT
README.md
grunt.js
package.json

README.md

grunt-spritesmith

Grunt library for using spritesmith, a spritesheet and CSS pre-processor utility.

Synopsis

Spritesmith accepts a list of images, stiches them together, and returns that image along with a coordinate map of where each image is located and its dimensions.

Grunt is a node.js based CLI build tool.

json2css converts the output from Spritesmith and generates variables and helper functions for hooking into inside of your CSS pre-processor.

When you combine all three of these, you get a grunt plugin that makes maintaining sprites a breeze.

Getting Started

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-spritesmith

Then add this line to your project's grunt.js gruntfile:

grunt.loadNpmTasks('grunt-spritesmith');

Usage

grunt.initConfig({
  'sprite': {
    'all': {
      // Sprite files to read in
      'source': ['public/images/sprites/*.png'],

      // Location to output spritesheet
      'destImg': 'public/images/sprite.png',

      // Stylus with variables under sprite names
      'destCSS': 'public/css/sprite_positions.styl',

      // OPTIONAL: Specify algorithm (top-down, left-right, diagonal, alt-diagonal)
      'algorithm': 'alt-diagonal',

      // OPTIONAL: Specify engine (auto, canvas, gm)
      'engine': 'canvas',

      // OPTIONAL: Specify CSS format (inferred from destCSS' extension by default) (stylus, json)
      'cssFormat': 'json',

      // OPTIONAL: Specify img options
      'imgOpts': {
         // Format of the image (inferred from destImg' extension by default) (jpg, png)
         'format': 'png',

         // Quality of image (gm only)
         'quality': 90
      }
    }
  }
});

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via grunt and test via npm test.

Algorithms

Algorithms are maintained via twolfson/layout. If you would like to add one, please submit it via a pull request.

Engines and image options

Engines and image options are maintained via Ensighten/spritesmith. If you would like to add one, please submit it via a pull request.

CSS formats

CSS formats are maintained via twolfson/json2css. If you would like to add one, please submit it via a pull request.

License

Copyright (c) 2012 Ensighten Licensed under the MIT license.

Something went wrong with that request. Please try again.