Pine

A modular and lightweight, responsive email framework.
Easy to use and filled with cool stuff.

Getting Started

Pine is easy to use and offers 10+ useful components for quick email layout creation.

Inspired by the awesome Foundation for Emails, we created a framework that is lighter and has solid email client compatibility.

There is no build system: just a grid, some CSS, a few design patterns, and some awesome components.
Simply copy HTML and stack grid elements in the provided default layout file, then add your own content inside them.


Components

Components are prestyled elements that are ready to be implemented. Easily override default styles and customize them further.


Design Patterns

Useful features and coding techniques that will help you create awesome emails with the Pine Framework.

Custom Mobile Stacking

Prioritize content for mobile devices by specifying the order in which columns should stack on the mobile breakpoint.

View

Background Images

Learn how to add bulletproof background images to your Pine emails and have them work almost everywhere - even Outlook!

View

Single Column Centering

Centering a single column in a row is easy with Pine. No extra markup and empty columns, just widths and padding. As it should be.

View

Email Client Compatibility

Pine supports and has been tested to work with the following email clients:

Email Client or Device Compatible
Android
Android 4.4.*
Android 5.1.0 *
Gmail Android App
Outlook Android App
iOS
iPad
iPad Mini
iPhone 5
iPhone 6, 6+
iPhone 7, 7+
Gmail iOS App
Outlook iOS App
Apple Mail
Apple Mail 8
Apple Mail 9
Apple Mail 10
Outlook
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2011
Outlook 2013
Outlook 2013 (120 DPI)
Outlook 2016
Outlook 2016 (Mac)
Lotus Notes
Lotus Notes 8
Lotus Notes 8.5
Mozilla
Thunderbird
Common Web Clients
AOL
Gmail
Google Apps
Office 365
Outlook.com
Yahoo!

* Displays the desktop version.

Other Notes:

  • Outlook does not support rounded or pill buttons, it shows 90° corners
  • In our tests, only Yahoo! for web and Outlook for Mac support parallax image backgrounds
  • For Web Clients, we officially support IE10+, Edge, Chrome, Firefox, and Safari (Mac). Opera should work too, but we haven't tested it.

The following web email clients have also rendered Pine's grid well, although we don't officially support them:

Email Client Compatible
BOL
Comcast
Free.fr
GMX
Laposte.net
Mail.ru
Nate
Naver
QQ
T-Online.de
Web.de
ThemeMountain

Current Version