# Foundation for Emails — Responsive HTML Email Framework

> CSS framework by ZURB for building responsive HTML emails that render consistently across email clients including Outlook, Gmail and Apple Mail.

## Install

Save in your project root:

# Foundation for Emails — Responsive HTML Email Framework

## Quick Use
```bash
npm install -g foundation-cli
foundation new --framework emails myproject
cd myproject && npm start
```

## 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 <row>, <columns>, <button>) 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

---
Source: https://tokrepo.com/en/workflows/asset-c4302046
Author: AI Open Source