Inky and Slinky

Avatar of Chris Coyier
Chris Coyier on

Inky is kinda like a preprocessor for HTML created by Zurb, specifically designed for responsive emails.

I’m sure a lot of us have hand-coded HTML emails (I do it regularly) and know that it’s typically <table> soup. It’s not even just the tables that are annoying, but the fact that there are so many of them nested to do even fairly simple things it’s hard to keep straight.

Inky’s appeal is pretty clear from the first demo in their docs:

But how do you go about using it? Like any preprocessor, ultimately you need to convert its syntax into browser-readable code. Inky is in node, so you also use it much like any other node-based preprocessor. You can install it and call it directly from the command line, from within node code, or as a Gulp plugin.

This is where Slinky comes in.

Slinky makes it easier to play around with Inky. In fact it could be your primary workflow if you design one-off emails pretty regularly.

You edit this Pen:

See the Pen PGPNwk by Inky (@FoundationForEmails) on CodePen.

You should fork a copy so you can save it and get your own URL slug. Slinky will need that.

Zurb has this Pen set up so that it processes the Inky code and injects the processed code, so you can see the live results. You can even do additional styling with SCSS right in the Pen!

When you’re done, you hit the big pink “Get your HTML Email” button in the lower right of the preview.

You’ll hop back over to the Slinky page and it’ll give you all that raw HTML, inline CSS included:

That raw HTML is exactly what you need to send the email. It’s ready-to-go.

Say you’re using MailChimp to send HTML email. They have a “Code Your Own” option where you’d be just pasting in what you now have:

Or say you use service like that sends your emails via an API, like MailGun:

You’d do it like that, only pass an html parameter instead of text.

I’d say if you hand-write and maintain a good amount of HTML emails, this could be a pretty useful way to work.