What is a sprite?

If you are familiar with this, disregard it.

What is a sprite?

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

The problem

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

I was the perfect candidate.

Approach

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

• gm, a wrapper for GraphicsMagick
• node-canvas, a node.js implementation of <canvas> which utilizes Cairo

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