Foundation for Emails (formerly Ink) is a framework tailor fit for a modern designer/developer looking to use the tools and technologies of today to build responsive email templates for tomorrow.

The Numbers Don’t Lie

According to Zurb, 54% of emails are opened on a mobile device and this number is likely to rise. With that figure in place, the need for a responsive email template is a must.

No matter the type of email sent, Foundation for Emails has you covered.

Getting Started

Throughout this article, I will be showing you how to get up and running with Foundation for Emails using a custom template I designed for my own small branding agency. As with any framework, it’s imperative for you to reference the documentation. I won’t be going over every detail as Zurb already has but this guide will be enough for you to hit the ground running.

SOURCE CODE

You can find the final source code to this project on GitHub.

INSTALLATION

To begin you can opt-in to use traditional orCSSSass. I’ll be making use of.Sass

There are many reasons I recommend going this route as opposed to traditional.CSS These reasons include:

  • More control over the framework’s visual styles
  • A full build process including Sass compilation and image compression
  • A custom languageHTML is known as inky which means you don’t have to write table based layouts by hand.
  • A built-in inliner for distributing your CSS as inline CSS
  • Live reloading
  • Handlebars templating

Install the Foundation CLI and Create a New Project

If you run into any permission errors, try prefixing the same command with sudo.

With the Foundation CLI installed, you can now create a blank Foundation for Emails project.

The CLI should ask you for a project name (I called my newsletter).

Running the Server and Compiling Assets

The build process will parse HTML, compile Sass, compress images, and launch a server. Your default browser should pop open a new tab point your index.html file from the address of localhost:3000. From this page, you can visit the sample templates Foundation for Emails bundled with the install.