Earlier this week, ZURB released Foundation for Emails 2, the successor to their previous responsive email framework, Ink. Foundation for Emails 2 boasts a more robust framework for HTML email development, including a Sass codebase, a new templating language, a flat file generator, inlining, BrowserSync, and more. I gave the new framework a whirl to see how it compares to my current development stack, which utilized Ink.
Setting Things Up
The email framework runs off of Foundation’s CLI, which means you’ll need to have Node.js and Git installed before you can use it. ZURB has a nice getting started tutorial that outlines installing the Foundation CLI and creating a new email project. This will install all of the dependencies for the stack, as well as the template files.
Although this is already more work than using Ink was previously, the additional steps allow for a more robust and easier to use build system in the long run.
ZURB Stack
Foundation for Emails 2 runs its own development stack to help speed up development and testing time. The stack runs off of Gulp and includes a LibSass compiler, an inliner tool, Panini, BrowserSync, and image compression. If you’re familiar with Gulp, you’ve likely worked with most of these plugins on other projects, but the unknown one to me was Panini. Panini is a flat file generator based off of Handlebars that allows you to create partials for common HTML components, like the header and footer. This makes developing multiple emails for the same client much easier, since you can just reuse those components. And because the entire stack is built on Gulp, you could easily add your own plugins to customize your development environment to your liking.
The Inky Templating Language
My favorite feature is the new Inky templating language, which allows you to write shorthand template tags that compile into the standard table syntax. Instead of writing out all of the nested tables it takes to create rows and columns for a responsive layout, you simply use tags like container, row, and columns. This makes your code a lot cleaner and easier to read. With the accompanying CSS already included, Inky makes getting started with new layouts a breeze. I’m interested to see what additional tags will be added to Inky in the future, and if we will be able to define our own tags for common patterns.
Inlining CSS
One of the pain points of developing HTML emails is having to inline all of your CSS, but with the ZURB stack, it’s as easy as running a build command. Not only does this keep your markup free of inline styles, but it also allows you to write in Sass, which gives you access to variables and mixins. It is important to note that the inliner plugin does not run automatically with the other Gulp tasks, so you will need to remember to run the command when your email is ready for testing or deployment.
Final Thoughts
Foundation for Emails 2 has a lot of features, and I feel like I’ve only scratched the surface in the few demos I’ve done with it. Overall, it seems like a great solution for HTML email development, although it isn’t something I would use on every project. For projects where I need a highly customized layout, the markup required by the framework feels a bit too restrictive, as it did with Ink. For one-off emails or heavily image-based emails, setting up the framework might take longer than necessary. In these cases, I likely wouldn’t use Foundation for Emails 2. That being said, I think ZURB has created something great for email developers, and I’m excited to begin using the stack for my client work.