Spritesmith

Spritesheet generation made easy and extensible

Created by Todd Wolfson / @twolfsn / github/twolfson

https://github.com/twolfson/hack-and-tell-spritesmith

What is a sprite?

Nyan cat!!!

If you are familiar with this, disregard it.

What is a sprite?

Google spritesheet Bootstrap spritesheet

The above are CSS spritesheets for
Google and Twitter Bootstrap respectively.

The problem

Spritesheet and variable maintenance is either:

  • Done by hand (e.g. Photoshop + Text editor)
  • In a deeply integrated system (e.g. SASS + Compass)
  • Not a cross-platform solution

Editing sprite in photoshop
Compass Coexist computer icons

The problem

I was maintaining CSS by hand, a JavaScript guru,
and a Windows user.

logo.js Windows 7 logo

I was the perfect candidate.

Approach

During my initial research, I found two node modules which would suit my needs:

GraphicsMagick logo Cairo logo

Solving

gm was the harder of the 2 engines.

It required "trial and error" to get transparency working.

In the end, it all came together and we were making sprites =D

Going beyond

The next step was to write a grunt wrapper and call it a day.

However, I pondered modularity and if/where I could draw lines.

 

I wound up writing 5 modules and am considering even more.

grunt-spritesmith, spritesmith, layout
json2css, json-content-demux

Current state

3 engines; phantomjs, gm, node-canvas

4 algorithms; top-down, left-right,
diagonal, alt-diagonal

5 CSS variable formats; JSON, SASS, SCSS, LESS, Stylus

1 third party project written on top of spritesmith

Still looking for a hosted solution for no external dependencies

Spritesmith

Spritesheet generation made easy and extensible

Created by Todd Wolfson / @twolfsn / github/twolfson

https://github.com/twolfson/hack-and-tell-spritesmith