Stitches An HTML5 sprite sheet generator

Drag and drop image files into the space below and click "Generate" to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox.

Implementation

Stitches requires a stylesheet, a script, and an HTML element to get the job done:

<link rel="stylesheet" href="css/stitches-0.5.18-min.css">

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/modernizr-2.0.6.min.js"></script>

<script src="js/stitches-0.5.18-min.js"></script>

Once that's in place, the sprite sheet generator is created by the init method:

<div id="stitches"></div>

<script>
jQuery(document).ready(function ($) {

    var $stitches = $("#stitches");
    Stitches.init($stitches, {jsdir: "js"});

});
</script>

Documentation is available here.

Dependencies

jQuery 1.7.1+ New, Modernizr, Dropfile, Flashcanvas for older browser support

Contributing

• Fork the project.
• Read through the outstanding issues or report new ones.
• Write some tests to make sure we don't accidentally break each other's code.
• Send a pull request.

License

MIT

Download

The latest release, 0.5.18, is available here.

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/draeton/stitches