Slinging Responsive Emails from the Cloud

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 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.

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

Step 1 Code Your Email:

Write some custom Inky code or even regular old HTML! Just click this button below:

Code Your Email

Step 2 Hit this button in Codepen:

After you finish changing the content in Codepen, hit this button!

Step 3 Copy Your New Email Code:

This has all of your HTML ready to send off or test!

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!

Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in