A responsive, 4 column typography grid for emails
Acorn's four-column responsive grid system gives you the flexibility to create layouts of all shapes and sizes, for both desktop and mobile. Create solid desktop emails and adapt them to specific mobile requirements with our utility classes.
Rows are 100% wide, center-aligned stackable tables that go inside a container and hold your column tables. Their maximum width is constrained by the container, so we can take advantage of that and use width="100%" on them. This way, we don't need to worry about resetting widths through CSS when nesting rows:
Row tables have 24px padding set on both sides of their table cell. This creates the impression that the container has padding (in fact, it does not), all while giving us opt-in flexibility: the goal here is to give content some breathing room in the container, by creating whitespace.
However, we now have the freedom to choose whether we use this whitespace or not. For example, in case we need an image to stick to the side, we can remove row padding along with the column's padding for that side:
Inside the row table, Acorn nests another table that contains the grid columns. As you can see in the example above, this nesting allows us to set container padding and column gutters independently, so that we don't always need to remember to set different paddings on the outer edges of the first and last columns in the grid.
Together, this row padding combined with column gutters create an apparent container padding of 32px, resulting in a nice 'boxed' layout on both mobile and desktop.
Of course, you can use any of the mobile spacing helpers on the row table cell, or on each grid column, to fine tune mobile spacing to your requirements.
Columns are the <td> tags inside the nested table of a Row table:
Each column has a fixed width, defined through the width="" attribute for desktop and tablets. This fixed width is set at 122px in the 4-column grid, but will be different depending on the amount of columns used.
Columns in Acorn have 8px gutters, defined through inline shorthand-CSS padding for each side.
Columns are required to use a col class, needed for normalization on mobile. This class will set the column width to 100%, and will also adjust content line-height to a smaller value, more suitable for mobile devices:
<td>and resetting it to
display: inline-block;for mobile, column stacking cannot work properly in the Android 4.4 native email client. There are no plans to support this client in Acorn.
If you don't want columns to stack on mobile, you can use custom column mobile width classes:
The class names follow the familiar Bootstrap 4 naming convention:
These classes use percentage-based max-width, instead of width. This way, we only constrain the mobile width, instead of overriding it with !important. Being able to write less code is always a win :)
You can use any combination of the mobile width classes. If their sum exceeds the equivalent of 4 columns, the first column that won't be able to fit in the same row will break onto the next one:
col-sm-4) will still be 100% wide and break on to their own line on mobile.
You can use offset classes to push columns to the right on mobile. These use the CSS
Just like mobile widths, the naming convention follows the Bootstrap 4 pattern:
You can use these classes to fine tune and adapt your layouts for mobile devices. For example, let's create a 3-column desktop layout that changes to 2+1 columns on mobile, and aligns the third column (price) with the second one (description) on mobile: