Familiar components for building email layouts

The layout structure in Acorn 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 Acorn 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, Acorn 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 Acorn, and it's mandatory when using the grid system:

This 600px 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, Acorn 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 600px wide, Acorn's media query triggers responsive styles at 599px:

Next Up: The Grid →

Current Version