The Grid
If you're familiar with the Foundation for Sites grid, you'll be right at home working with Foundation for Emails.
The grid has two core elements: the row and column. Rows define horizontal sections of content, and columns carve up the row into side-by-side sections.
Container
All emails should have a container element. This gives the email a maximum width for email clients on larger screens. It also orients the email in the center.
A container is a full table, so it needs the tags <table>, <tr>, and finally <td>. The class .container goes on the <table>.
<container>All the rows go here</container><html>
<head></head>
<body>
<table align="center" class="container">
<tbody>
<tr>
<td>All the rows go here</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
Rows
A row is a <table> with a <tbody> and <tr>. Inside of this <tr>, you'll place each individual column. The <table> also has the class .row.
In Inky HTML, use the <row> tag to create a row.
<container>
<row>
Columns go here
</row>
</container><html>
<head></head>
<body>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
Columns go here
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
Columns
The structure of a column is a bit more involved. At the top level, a column is a <th> with the class .columns.
Inside of the <th> is another full table. The content of your column goes inside of a <th>. Right below that table header should be another <th> with a class of .expander. This empty element helps the column expand to be full-width on small screens.
Here's our full column syntax so far:
<th class="columns first last">
<table>
<tr>
<th>This is a column. Columns contain your content.</th>
<th class="expander"></th>
</tr>
</table>
</th>In Inky HTML, use the <columns> class to create a column.
<columns>This is a column. Columns contain your content.</columns><html>
<head></head>
<body>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>This is a column. Columns contain your content.</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</body>
</html>DEMO
Sizing
A column has a size between 1 and 12—this is how many columns wide the element is. Foundation uses a 12-column grid, so 6 columns is half the width of the whole row.
Set column sizes with the classes .large-n and .small-n, where n is how wide the column is. The .small- size is applied on mobile email clients, while the .large- size is applied on desktop email clients.
In Inky HTML, set the attribute small or large on the <columns> tag with the size you want. If you don't fill in small, it will use 12 by default. If you fill in small but not large, large will use the same value as small.
<columns small="12" large="6"></columns>First and Last Classes
The .first class adds the appropriate amount of padding-left to space the content away from the container’s edge. The .last class is added to your last set of columns in a row to add padding-right to the column. If you have columns in between .first and .last, these classes are not needed on the middle columns.
The reason these classes exist is that CSS properties like :last-child don’t work in most email clients so a class is needed.
In Inky HTML, these classes are added for you.
<columns large="4">One</columns>
<columns large="4">Two</columns>
<columns large="4">Three</columns><html>
<head></head>
<body>
<th class="small-12 large-4 columns first">
<table>
<tbody>
<tr>
<th>One</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tbody>
<tr>
<th>Two</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-4 columns last">
<table>
<tbody>
<tr>
<th>Three</th>
</tr>
</tbody>
</table>
</th>
</body>
</html>DEMO
Expander
The .expander prevents a rendering bug in Outlook that sometimes keeps the columns from expanding to full width. Instead of ignoring the width attribute and politely taking up only as much space as the content dictates (default <th> behavior), the presence of the expander <th> causes the content <th> to become “greedy” and take up as much space as is given to it, up to the value specified in the width (which is 100%). They’re set to not display, but they kick the total width up over 100%, which forces their sibling <th> to expand fully.
Collapsing
Collapsing a row removes the gutters from every column, which is the spacing between them. Add the class .collapse to a row to enable this.
<row class="collapse">
<columns large="6"><img src="https://placehold.it/300x150/777777/&text=These columns touch" alt=""></columns>
<columns large="6"><img src="https://placehold.it/300x150/999999/&text=These columns touch" alt=""></columns>
</row><html>
<head></head>
<body>
<table class="row collapse">
<tbody>
<tr>
<th class="small-12 large-6 columns first">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/300x150/777777/&text=These columns touch" alt></th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-6 columns last">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/300x150/999999/&text=These columns touch" alt></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</body>
</html>DEMO
Offsets
Offsets add spacing to the left of a column. Use this if all the columns in a row don't add up to 12, and you want to mess with the spacing between them.
Use the class .large-offset-n to create an offset, where n is the amount of columns to offset by. So, for example, .large-offset-3 would offset the column by 25% of the width of the row. Think of it as pushing the columns over from the left.
<row>
<columns large="3" class="large-offset-3"><img src="https://placehold.it/150x150/999999/&text=offset column" alt=""></columns>
<columns large="3"><img src="https://placehold.it/150x150/999999" alt=""></columns>
</row><html>
<head></head>
<body>
<table class="row">
<tbody>
<tr>
<th class="large-offset-3 small-12 large-3 columns first">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/150x150/999999/&text=offset column" alt></th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-3 columns last">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/150x150/999999" alt></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</body>
</html>DEMO
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$grid-column-count |
Number | 12 |
Default number of columns for an email. |
$column-padding-bottom |
Number | $global-padding |
Default padding for the bottom of a column. |
$container-radius |
Number | 0 |
Default border radius for the container. Use a px value |
