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.
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.
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.
Pine uses several meta tags, in order to:
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.
The base HTML of Pine is made up of two nested tables:
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).