Making HTML Emails, is still like a journey back to the good ol' nineties, in terms of Layout Programming. When you take a look at the CSS Guide from Campaign Monitor, you get a pretty good glimpse, at what might and probably might not be supported by the various Email Clients.

One of the best options, to keep sane while creating HTML Email Templates, is to use one of the available frameworks. Since I use Zurbs Foundation Framework a lot, I will describe my setup with Zurbs Foundation for Emails (formerly known as Inky). Templates created with Inky will also be responsive.

From gulp to grunt

The integration of Inky with gulp or as a standalone is already documented at the Inky github page. But I needed a setup for an existing project which makes use of grunt. So here is my solution to get Inky up and running with grunt.

Requirements

  • Use a single Template file to generate custom templates
  • Create custom templates with grunt command grunt watch:email --template='new_email_template'
  • Watch for file changes and re/compile the new templates automatically
  • Parse single Template with Inky
  • Remove unused CSS
  • Minify all CSS and HTML Code
  • Inline all CSS code
  • Move CSS to <body> Element
  • Replace placeholders with Backend Templates Tags

Packages

The following packages are required to get things running.

Creating HTML Email Templates the easy way

Assuming you got a project folder with node and all the required packages installed. Copy the two files, attached to this article, into your project folder and create a folder named /templates.

Starting point for every new template is master_template.html.

grunt watch always needs to be started first

grunt watch:email --template='my_new_template'

Every time a change is made to the master_template file, a template with the provided filename is created/updated at templates/my_new_template.html. Furthermore the template code is cleaned up, minified inlined and ready to ship.

From now on, it is possible to use Inkys custom tags <container><row>Columns go here</row></container>. to create HTML Email templates. The custom tags will be automatically converted to HTML tables while using the grunt task.

This makes creating HTML Emails a little easier, since the HTML code is not cluttered with endless table tags. And as bonus feature all CSS is inlined and all code is minified.

Conclusion

I followed Zurb's way of converting HTML Code with gulp and added the same steps to the grunt task. Each time I start with a new Layout, I just backup the master_template.html file and just start over again.

Project Files