Slinky

Email design is hard — a lot harder than it should be. The release of Foundation for Emails 2 pushed email design and development forward by bringing in some of the best practices of web development. This was awesome for people that know about the web, but things like Npm and Gulp are scary and sometimes hard to install, especially if you don’t have a strong web background.

We’ve made it one more step closer to opening up email design to everybody. Meet Slinky.

Code up a custom responsive email using just your web browser and our lightning-fast Inky Templating language. Oh yeah, it’s all baked into the CodePen below. Just fire up the CodePen, write your markup in either Inky or vanilla HTML, and inline that sucker! Check it out below:

Also, check out the piece Chris Coyier of CodePen and CSS-Tricks.com wrote a fantastic breakdown of how Slinky works and how it can be used with major ESP's like Mailchimp or API's like MailGun.

Step 2 Hit this button in Codepen:

Step 3 Copy Your New Email Code:

Copy

Ok, so how does it work? It actually wasn’t too difficult with the help of Browserfy. It’s pretty simple, check it out below:

This code takes the Inky language and makes it into one slick Javascript file. That means you can just import it anywhere! Say goodbye the days of running commands in your terminal!

This was pretty great, except the file was a little large (over 2MB!) with all of our dependencies packaged up. We uglified it, and voila! — 233KB! Check out all of the Inky templating here.

Now obviously, for a real email you probably want to add images, and the free version of CodePen doesn't give you anywhere to upload them. To do this, you can add images just by hosting them anywhere you’d normally host images: on your website, on S3, or at your email campaign service. Alternatively, if you could sign up for a CodePen pro account they’ll let you host images directly on CodePen.

We’ve got some big hopes for this. Who knows, it might just show up in your web email-builder of choice!