Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers.

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>

Documentation

Documentation is available here.

Dependencies

jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New

<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap-responsive.min.css">

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

Contributing

License

MIT

Download

The latest release, 1.3.5, 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