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.
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.
You can find the final source code to this project on GitHub.
To begin you can opt-in to use traditional or
Sass. I’ll be making use of.
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 language
HTMLis 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.