[HTML] Stitches: HTML5 sprite sheet maker

Stitches: HTML5 sprite sheet maker

Stitches is an easy to use HTML5 sprite sheet generator. Just drag and drop images onto the app and it will generate both the sprite sheet and necessary CSS.

Homepage: http://draeton.github.io/stitches/
GitHub: https://github.com/draeton/stitches
Docs: http://draeton.github.io/stitches/stitches/doc/stitches.js.html

 

HTML5 Sprite Sheet Generator 

http://draeton.github.io/stitches

 

Stitches

Stitches is an HTML5 sprite sheet generator. The current version is 1.3.5. Documentation is availablehere.

Implementation

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

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

<script data-main="js/stitches.js" src="js/stitches-1.3.5.min.js"></script>

The sprite sheet generator is automatically created in elements that have the stitches class:

<div class="stitches"></div>

If you choose, any images that are a part of the initial markup will be loaded onto the canvas:

<div class="stitches">
    <img src="img/test/github.png" data-name="github"/>
    <img src="img/test/gmail.png" data-name="gmail"/>
    <img src="img/test/linkedin.png" data-name="linkedin"/>
    <img src="img/test/stackoverflow.png" data-name="stackoverflow"/>
    <img src="img/test/tumblr.png" data-name="tumblr"/>
    <img src="img/test/twitter.png" data-name="twitter"/>
</div>