Email foundation
Email foundation Email foundation Email foundation

Foundation for Emails 2. Quickly create responsive HTML emails that work. Even on Outlook!

Foundation for Emails 2 (formerly known as Ink), is a Responsive Email Framework created by ZURB. It is designed to quickly create responsive HTML emails that are guaranteed to work across major email clients, even Outlook.

Here are the principal functionalities and features:

1. Core Goal and Compatibility

  • Responsive Design: The framework helps users build responsive emails that look great on any device and are optimized for both desktop and mobile email clients. This addresses the fact that 54% of all emails are opened on a mobile device.

  • Broad Client Support: It ensures emails work in all of the major email clients, even Outlook. The framework gives guidelines to prevent inconsistent spacing and odd rendering issues, reducing the time spent debugging.

  • Use Cases: It facilitates the creation of emails for any use case, including Transactional Emails, Marketing Emails, and Drip Campaigns.

2. Coding Efficiency and Templating

  • Inky Templating Language: Foundation for Emails uses Inky, a templating language that simplifies email markup. Users write simple, web-like tags such as <row> and <columns>.

  • Reduced Markup Complexity: Inky translates these simple tags into the complex table markup (up to 3x more code) needed for email clients. This results in faster coding, less frustration, and better organization.

  • Responsive Grid: It includes a Responsive Grid designed to work on any device and allows users to code emails like they code websites. This grid creates evenly sized content blocks (good for image galleries or product lists) and ensures the layout stacks neatly on small screens. Padding and row width automatically scale for mobile devices.

  • Sass Customization: Users can quickly create stylish emails using Sass. Sass variables provide control over common styles (colors, font sizes, spacing, column counts), eliminating repetitive CSS and allowing users to change the entire look and feel in minutes.

3. Workflow and Tool Integration

  • Pre-built Components: The framework includes Common UI Patterns to speed up building, such as buttons, menus, block grids, callouts, typography, and thumbnails. Helpers like Visibility and alignment are also included.

  • Templates: Foundation for Emails provides Ten (or twelve) responsive HTML templates to start from. These templates cover common needs like Basic, Hero, Sidebar, Marketing, Newsletter, Order, and Password Reset.

  • Automatic CSS Inlining: It handles the complex task of inlining CSS automatically (in the Sass version). It keeps the work-in-progress HTML separate from the inlined version. A separate web inliner is also available.

  • ZURB Email Stack: An integrated workflow tool, the ZURB Email Stack, includes a Gulp build system, Inky templating, auto inlining, CSS and image compression, and support for Handlebars templates. Handlebars allows users to reuse common elements (like headers and footers) across multiple emails.