A solid 12 column responsive grid for emails
The Pine Email Framework is based on a grid built with familiar concepts: wrappers, rows, and columns.
Because embedded CSS support is so inconsistent in email, Pine is desktop-first. This means that wrapper, row, and column widths are set with attributes and inline CSS, and they get overridden through a @media query on the mobile breakpoint.
The mobile grid kicks in at 699px screen width. Wrappers, rows, and columns are all percentage-based.
Wrappers are still 100%, but rows are set to be 90% wide by default.
If you want, you can safely change mobile row width in the CSS, to be 100% or any decently-wide percent.
However, 100% wide rows will cause the wrapper background colour to not be visible on mobile anymore.
Columns (including nested ones) keep their 10px gutters, so you get the same consistent spacing when using multiple columns in a row.
Wrappers are 100% full width tables that can hold one or more row tables.
Pine comes by default with a single wrapper that acts like a container for all your rows.
Rows are 700px, center aligned, stackable tables, that go inside a wrapper and hold your column tables.
You can insert up to 12 grid columns in a row table. If you add more than 12, the email might expand (email tables can't float/flush like divs) and column width will become unpredictable, so it's not recommended.
Pine ships with two versions of the grid:
You can use the mobile-collapsed class on a row, to have its outer padding removed on mobile.
This will remove left padding on the first column, as well as right padding on the last column.
We have side padding for desktop... ... but it's removed on mobile
You don't need to add the mobile-collapsed class on nested rows - they are automatically collapsed for mobile, as long as their parent row contains the class.
<th> elements that go inside the
<tr> of a row table.
Each column has a predefined width for desktop. To better understand column widths, please refer to this image:
The padding on each side of a column is 10px, with the exception of the first and last columns.
The first column in a row has 30px left padding, while the last column has 30px for the right padding.
By default, columns will stack on mobile - Pine resets them to 100% width and adds a mobile-12 class for consistent gutters.
You can change the 12 in mobile-12 on a column
<th>, to define what size a column should take on mobile.
It can be any integer between 1 and 11 (both inclusive), and no matter how many columns you have, it should add up to 12.
mobile-12 should only be used on non-nested columns that have different left/right padding set inline, or no left/right padding at all. This will provide consistent gutters for full width columns on mobile.
Pine supports column offsets for mobile, and they work as you're already used to from CSS frameworks, like our own Timber.
You just add a mobile-offset-X class to a column. This sets a percentage-based left margin on the column, only for mobile.
So as long as its width is an even number, you can center any grid column on mobile, by using an offset that you can calculate like this:
mobile offset = (12 - X) / 2
... where X is the number from the mobile-X class you've set on the column.
Sometimes, you need to stick an image to the very left or right of your email. Or maybe both.
This is easily done on the first and last columns, by removing the 30px side padding.
IMPORTANT: when you remove side padding on a parent column, always add that number back to its width. If you don't, the width of the column will be automatically calculated by the email client/browser, and this can lead to inconsistent results. This is not needed for nested columns though, just make sure their widths add up to the parent column's width.
You can nest columns to create complex layouts. Simply insert a new row as a child element of a column.
This new row can contain the entire grid if you wish to, but it's recommended to use 2 columns at most.
When nesting, you must add the has-columns class on the column that you nest in, as shown below.
Doing so will preserve the 10px gutters on mobile, providing you with consistent spacing between columns.
When nesting columns:
Outlook for desktop supports 120 DPI, which can sometimes lead to blown up emails.
To keep things predictable, Pine adds some XML code for Outlook's Word rendering engine to keep the email at the normal, 96 DPI resolution. Knowing that, you should not remove the xmlns:o="urn:schemas-microsoft-com:office:office" attribute from the <html> tag.