Familiar components for building email layouts

The layout structure in Pine is built with familiar frontend framework concepts, like containers, rows, and columns. All these components use HTML tables for markup, in order to provide consistent rendering across email clients.

Wrapper #

The Wrapper in Pine is a full width table that holds the main container, and allows for defining a body background colour. It's also used to add some space around the container, so that it doesn't stick to the edges of the email client's viewport:

By default, Pine uses 15px of padding on the wrapper table, through the use of the cellpadding="15" attribute. This value is enough to make the container stand out more while making sure the responsive view doesn't lose too much space. 15px is also half of the container's apparent padding →

Hack alert: the u ~ div .wrapper {min-width: 100vw;} CSS is a temporary hack that forces the Gmail iOS app to expand its viewport properly to the right side. This hack will be removed if and when Google fixes the issue.

Container #

This is the most basic component in Pine, and it's mandatory when using the grid system:

This 700px-wide, center-aligned table holds the grid rows and columns in place, and defines a fixed width for our emails on desktop and tablets. On mobile, its width is forced to 100% so that our layout doesn't expand horizontally outside the viewport.

Responsive breakpoint #

Being a responsive email framework, Pine is desktop-first. The fixed-width container and columns are overridden for mobile devices through the use of a single CSS media query.

Since the container is 700px wide, Pine's media query triggers responsive styles at 699px:

Next Up: The Grid →

Current Version