Pine Email Framework

A lightweight, responsive email framework.


Currently v2.0.0

Get started with Pine, the responsive HTML email framework

Pine is a responsive email framework made for email developers. With a focus on clean code, reusability, and utility classes, it is lightweight, easy to learn, and has solid email client compatibility.

Starter layout #

Pine comes with a layout file that you can use as the boilerplate for any HTML email you build with it.
This file includes all the necessary CSS, tags, and attributes that are required for Pine to render as intended.

In addition to the minimum viable CSS, the starter template also includes all mobile helper classes by default. They're included to help you quickly get started, but you will most likely not need all of them in every email. We strongly suggest keeping only the necessary CSS in your production emails, in order to keep the file size as small as possible. A quick way of removing unused CSS from your HTML emails is EmailComb.

HTML5 doctype #

Pine uses the HTML5 doctype. It's easy to remember, and enough to trigger standards mode in the majority of email clients.

The <html> tag also includes some xmlns: attributes: these are required for enabling background images and for preventing zoom issues at high DPI, in Outlook.

Meta tags #

Pine uses several meta tags, in order to:

  1. Set the document encoding
  2. Ensure proper rendering and touch zooming for all devices
  3. Prevent iOS 10&11 from 'zooming-out' the layout
  4. Tell Internet Explorer to display content with the highest rendering engine available

The <!--[if mso]> commented XML block prevents zoom issues in Outlook when high DPI display settings are used. It also allows for using PNG as an image format.

You will also notice there's an empty <head> tag, right before the one that's used.
This is not a mistake, but a (hopefully temporary) feature: currently, the Yahoo! mobile app removes the first <head> tag it finds, resulting in our embedded CSS not being available and the layout not being responsive. This trick prevents that from happening.

Email body #

The base HTML of Pine is made up of two nested tables:

  • The first one allows us to set a background colour for the email, and adds a bit of padding to the viewport. The class="wrapper" is used to force the viewport to 100% width in Gmail on iOS.
  • The second is our container, where we will add rows and columns for our content.

The <body> tag includes some inlined CSS resets. Since these properties still work if declared only once, it's better to keep them on this tag instead of having them in a table or td selector from the embedded CSS (not only will some clients be unable to read that, but most ESPs will unnecessarily inline them on every table and table cell).

Next Up: Contents →

Current Version