Foundation for Emails — Responsive HTML Email Framework

Introduction

Foundation for Emails (formerly Ink) is a responsive email framework by ZURB. It provides a set of tested HTML components and a build pipeline that compiles clean, modular source templates into the inline-styled, table-based HTML that email clients require.

What Foundation for Emails Does

• Provides pre-built responsive grid, button, callout, and menu components for email
• Compiles Sass styles into inlined CSS compatible with major email clients
• Converts modern HTML markup into table-based layouts automatically via Inky templating
• Includes a local development server with live preview and BrowserSync
• Produces production-ready HTML that works in Outlook, Gmail, Yahoo Mail, and Apple Mail

Architecture Overview

The framework uses a Gulp-based build pipeline. Source templates are written in Inky, a custom templating language that maps semantic tags (like , , ) to the nested table markup email clients require. Panini handles layout composition and partials. Sass files are compiled and then inlined into each HTML element using a CSS inliner. The output is a single HTML file per email template with all styles inlined.

Self-Hosting & Configuration

• Install the Foundation CLI globally via npm for project scaffolding
• Customize the Sass variables file to match brand colors and typography
• Add custom Inky components or Handlebars partials in the src directory
• Configure the Gulp pipeline in gulpfile.js for custom build steps
• Use npm run build to generate production-ready inlined HTML files

Key Features

• Inky templating language that abstracts table-based email layout into readable markup
• Responsive grid system that gracefully degrades in clients without media query support
• Pre-tested components (buttons, callouts, menus, spacers) across 50+ email clients
• Sass-based theming with automatic CSS inlining during build
• Local dev server with live reload for rapid email prototyping

Comparison with Similar Tools

• MJML — component-based email markup by Mailjet; Foundation for Emails uses Inky with more layout flexibility
• Maizzle — Tailwind CSS for emails; Foundation uses Sass with a traditional CSS framework approach
• React Email — React components for email; Foundation is template-based without a runtime dependency
• Cerberus — lightweight responsive email patterns; Foundation provides a full framework with build tooling
• Litmus Builder — proprietary email editor; Foundation is open source with local development

FAQ

Q: Why can't I just use regular HTML and CSS for emails? A: Email clients like Outlook use rendering engines that do not support modern CSS. Foundation compiles your code into the table-based, inline-styled HTML that these clients require.

Q: Does Foundation for Emails work with email service providers? A: Yes. The compiled HTML output works with any ESP (Mailchimp, SendGrid, Postmark, etc.) that accepts raw HTML templates.

Q: Can I use Foundation for Emails without the CLI? A: Yes. The core Inky parser and CSS inliner are available as standalone npm packages for integration into custom build pipelines.

Q: How does the responsive grid work in Outlook? A: Foundation uses conditional comments and MSO-specific table markup so that Outlook receives a fixed-width fallback while other clients get the responsive version.

Sources

• https://github.com/foundation/foundation-emails
• https://get.foundation/emails.html