Getting Started

Two Ways to Get Started

Foundation for Emails can be used with plain CSS or Sass.

CSS Version

The fastest way to get started! The CSS version of Foundation for Emails has everything you need and nothing you don't to get started writing responsive HTML emails. You get our boilerplate HTML, our starter email templates, and the battle-tested Foundation for Emails CSS.

Get Started with CSS Version
Download Starter Kit

These are the files you'll use in the Getting Started guide.

Sass Version

Streamline your workflow even more. The Sass version of Foundation for Emails gives you greater control over the visual styles of the framework. It's also backed by the ZURB Stack, a Node-powered build system with HTML templating, Sass compilation, image compression, and inlining. Requires Node.js to get started.

Get Started with Sass Version
View Template Files

This is the project template you'll use in the Getting Started guide.



Looking for Ink 1.0?

Ink 1.0 is no longer maintained by ZURB, but we've still got all of the files you need to use it, as well as the documentation. Or, if you want to upgrade your project to Foundation for Emails 2, check out our migration guide.

Download View Docs

ZURB MASTER CLASSResponsive Emails

In this online class, you’ll learn how to rapidly design and develop responsive emails that look beautiful on just about every screen, browser, and email client out there—even Outlook.

Learn Foundation for Emails

Five steps to Foundation for Emails-certified emails

Follow these five steps to make sure your email looks great.

1

Download the boilerplate

Download our basic boilerplate with the Foundation CSS. Or, if you're a Sass user, install the ZURB Email Stack with the Foundation CLI.

2

Code your email

Use the documentation to build out your grid, adding components like buttons and callouts where needed. If you're just getting started, follow our CSS version guide or Sass version guide.

3

Inline CSS into HTML

Once your email looks great and responsive styles are included, inline your CSS into the email. Our web inliner makes this easy. Or, if you're using the ZURB Email Stack, just run npm run build.

4

Test your email

Don’t send it out just yet! Make sure you test it on as many platforms as you can. We use Litmus to test on a number of devices—you should too!

For a list of supported clients, check out our compatibility page in the docs.

5

Send it out!

Your email is ready to ship! We recommend using an email service provider like Mailchimp or Campaign Monitor, since some mail clients strip out the responsive formatting when you send an email.

Have a great email? Send a copy to us at foundation@zurb.com.