Familiar components for building email layouts

The layout structure in Pine is built with familiar frontend framework concepts, like wrappers, containers, 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 houses the main container, centering it and allowing 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:

<table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
    <tr>
    <td align="center" bgcolor="#EEEEEE">

        ...

    </td>
    </tr>
</table>

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 →

Container

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

<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
  <tr>
    <td align="left" bgcolor="#FFFFFF">

      <!-- ADD ROWS HERE -->

    </td>
  </tr>
</table>

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 breakpoints

Pine is desktop-first.

The fixed-width container and columns are overridden for mobile devices through the use CSS media queries.

Large breakpoint

For large-ish screen sizes (i.e. landscape view), Pine resets Wrapper and Container widths to 100%, but the desktop column widths are still being used. This affects all devices with a screen size between 481px and 632px:

@media  only screen and (max-width: 730px) {
  .wrapper img {max-width: 100%;}
  u ~ div .wrapper {min-width: 100vw;}
  .container {width: 100%!important; -webkit-text-size-adjust: 100%;}
}

Small breakpoint

This is where the fun starts. This media query applies to most devices, up to 699px screen width:

@media  only screen and (max-width: 699px) {
    ...
}