+ Starting a new Ink project is fairly straightforward. If you aren't using one of our templates, grab the boilerplate code from below to use as a starting point. While you can reference ink.css using a link tag for testing purposes, be sure to remove the <link rel="stylesheet" href="ink.css" /> statement and paste your CSS into the style tag in the head before running your email through an inliner. +

Boilerplate.html

+ If you're applying a background color to your entire email, be sure to attach it to the table with a class of body as well as to the actual <body> tag, since some clients remove this by default. +

Inline Styles

CSS

Grid

Structure

Ink uses a 12-column grid with a 580px wrapper. On mobile devices (under 580px wide), columns become full width and stack vertically.

Containers

Ink containers wrap the content and maintain a fixed, 580px layout on large displays. Below 580px, containers take up 95% of the screen's width, ensuring that your content doesn't run right up against the edges of the user's screen.

Rows

Rows are used to separate blocks of content vertically. In addition to the vertical separation, the <td> tags of .row tables use the wrapper class to maintain a gutter between columns. Note: the last .wrapper td in a row MUST have a class of .last applied to it, even if it's the only wrapper in the row (ex. for a row with a single, twelve column wide content area).

Columns

Columns denote the width of the content, as based on a 12-column system. The content inside them will expand to cover n-columns, assuming that the number of columns in one row adds up to 12.

The Three Grid Components

Basic example of the three main grid components, with additional padding and coloring added for visibility.

Visual Explantion of Grid

In the example below, the container is purple (and has some additional padding added so that it isn't completely hidden by the row), the row is green and the two columns are pink.

Breakdown

Examples

Even Columns

Element Type	Class Name	Description
table	container	Constrains the content to a 580px wrapper on large screens (95% on small screens) and centers it within the body.
table	row	Separates each row of content.
td	wrapper	Wraps each `.columns` table, in order to create a gutter between columns and force them to expand to full width on small screens.
td	last	Class applied to the last `.wrapper` td in each row in order for the gutter to work properly. If you only have one (presumably full-width) `.columns` table (and therefore one `.wrapper` td) in a row, the `.wrapper` td still needs to have the last class applied to it.
table	{number}	Can be any number between one and twelve (spelled out). Used to determine how wide your `.columns` tables are. The number of columns in each row should add up to 12, including offset columns.
table	columns	Table that displays as n-twelfths of the width of the 580px `.container` table on large screens, and expands to the full width of the `.container` table on small screens.
td	expander	An empty (and invisible) element added after the content element in a `.columns` table. It forces the content `td` to expand to the full width of the screen on small devices, instead of just the width of the content within the `td`.

Ink's tweve column grid makes creating even column layouts a snap. Just use one .twelve.columns, two .six.columns, three .four.columns or four .three.columns classes to create your layout. Appearing as multiple, even columns on large screens, the layout will fold into a single column on small (mobile) screens.

Code for Even Columns

Even 1, 2, 3 and 4 Column Layouts

Centered Content

To center the content of a column, apply a class of center to the <td> that contains the content. If you want to center an image, you should also apply a class of center to the image itself. For maximum client support, we also reccommend using the HTML <center> tag around the content you wish to center.

The Center Class

Centered Text and Images

Expanders

When the Ink grid is shown on a small screen, the .columns tables expand to the full width of the container and stack vertically. On some clients, however, the columns don't expand properly if the content isn't as wide as the screen. While this might not seem so bad, it can cause your layout to appear broken if you are using a background color on the .columns table or are centering the content.

To get around this, an empty <td> with a class of expander is used after the <td> containing the actual content in the .columns table. This extra <td> isn't displayed, but it forces the content <td> to expand to full width.

Expander TDs

Panels

Sub-Grid

Visibility Classes

Getting Started

Dive into creating your responsive email.

The Boilerplate

- Starting a new Ink project is fairly straightforward. If you aren't using one of our templates, grab the boilerplate code from below to use as a starting point. While you can reference ink.css using a link tag for testing purposes, be sure to remove the <link rel="stylesheet" href="ink.css" /> statement and paste your CSS into the style tag in the head before running your email through an inliner. -

Boilerplate.html

- - - - - - - - - - - - - - - -

- - - - - -

- -' - , 'html'); ?> -
-

- If you're applying a background color to your entire email, be sure to attach it to the table with a class of body as well as to the actual <body> tag, since some clients remove this by default. -

Inline Styles

- - -... - - - - ... - -

-' - , 'html'); ?> -
-

CSS

- -
+

Grid

Create powerful multi-device layouts quickly and easily.

- -

Structure

Ink uses a 12-column grid with a 580px wrapper. On mobile devices (under 580px wide), columns become full width and stack vertically.

Ink's grid can be thought of in terms of three components:

Containers

Rows

Columns

Columns denote the width of the content, as based on a 12-column system. The content inside them will expand to cover n-columns, assuming that the number of columns in one row adds up to 12.

The Three Grid Components

Basic example of the three main grid components, with additional padding and coloring added for visibility.

- - - - - - - - - -

- - - - - - -

- - Eight Columns - -

- -

- - - - - - -

- - Four Columns - -

- -

- - - -' - , 'html'); ?> -
-

Visual Explantion of Grid

In the example below, the container is purple (and has some additional padding added so that it isn't completely hidden by the row), the row is green and the two columns are pink.

- -
-

Breakdown

The main elements in the grid and how they're used:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Element Type	Class Name	Description
table	container	Constrains the content to a 580px wrapper on large screens (95% on small screens) and centers it within the body.
table	row	Separates each row of content.
td	wrapper	Wraps each `.columns` table, in order to create a gutter between columns and force them to expand to full width on small screens.
td	last	Class applied to the last `.wrapper` td in each row in order for the gutter to work properly. If you only have one (presumably full-width) `.columns` table (and therefore one `.wrapper` td) in a row, the `.wrapper` td still needs to have the last class applied to it.
table	{number}	Can be any number between one and twelve (spelled out). Used to determine how wide your `.columns` tables are. The number of columns in each row should add up to 12, including offset columns.
table	columns	Table that displays as n-twelfths of the width of the 580px `.container` table on large screens, and expands to the full width of the `.container` table on small screens.
td	expander	An empty (and invisible) element added after the content element in a `.columns` table. It forces the content `td` to expand to the full width of the screen on small devices, instead of just the width of the content within the `td`.

- -

Examples

Even Columns

Code for Even Columns

- - - - - - - - -

- - - - - - -

- - twelve.columns - -

- -

- - - - - - -

- - .six.columns - -

- -

- - - - - - -

- - .six.columns - -

- -

- - ... - - - -' - , 'html'); ?> -
-

Even 1, 2, 3 and 4 Column Layouts

- -
-
- - -

Centered Content

The Center Class

- - - - - - - - - -

- - - Centered content - - -

- - - - - - - - - -

- - - -

- - -

- - - -' - , 'html'); ?> -
-

Centered Text and Images

- -
-
-

Expanders

Expander TDs

- - - - - - - - - -' - , 'html'); ?> -
+

Sub-Grid

A non-stacking grid for even more versatile layouts.

+ -

Grids Within Grids

While the Ink grid can't be infinitely nested like its Foundation counterpart, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .sub-columns class (as well as a numbered class, same as the primary grid) to a <td> tag underneath a .columns table, you can sub-divide the .columns table into sub-columns.

The last .sub-columns <td> in the .columns <table> should be given a class of last in order for the gutter padding to be properly maintained.

- -
-

Sub-Grid Rows

To create nested rows within a column, place multiple .columns tables (with the same number of columns) in the same .wrapper td. These .columns tables can then be further divided into sub-columns by placing the a .sub-columns class on their child <td> elements.

- -
-

Examples

Non-Stacking Row

Sometimes you may wish to display columns of content that you don't want to stack on small screens. In this case, the easiest way is to place your content in a .twelve.columns container and use sub-columns to arrange your content.

- -

- -
-

Breakdown

Here's how these items are being used:

- -

Examples

Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

- - -

--> - -

Visibility Classes

Selectively show content for different screen sizes.

- -

By adding a visibility class to an element, you can show or hide it based on screen size. Visibility classes can be used on any element.

Note: If you're using a visibility class on an <img> tag, be sure to include it on the image's parent element as well, in order for it to work in all browsers.

- -
-

Breakdown

Available visibility classes:

- - - - - - - - - - - - - -

.hide-for-small

.show-for-small

.hide-for-large (same as .show-for-small)

.show-for-large (same as .hide-for-small)

Panels

Quickly highlight important content.

- -

Add a class of panel to a <td> in order to give it a default border and background color. Great for offsetting important content or sidebars.

- +

Buttons

Dynamic and effective calls to action.

Structure

Style One: The Preferred Method* Does not work with Premailer.

To create buttons that look great in most clients, give a class of button to an <a> tag, and use it to enclose a table with your content. While this gives you a nice looking button with a full click-target, it doesn't work in all CSS inliners, since it's technically invalid for an inline element (the <a> tag) to wrap a table element (booooooooo!).

- -
-

Style Two: The Bulletproof Method* Not yet implemented.

If you need to support a CSS inliner that chokes on our preferred buttons, then our bulletproof method is the way to go. By creating a <table> of class button and putting your <a> inside that, you'll have a nice looking button that won't break Premailer. This method comes at a cost, however, as the click target only covers the button text, rather than the entire button.

- -
-

Style Classes

Several built in styling classes can be applied to the same element as the button class is applied to in order to adjust the button's appearance.

Size

Size classes affect the button's vertical padding. The available size classes are:

- - - - - - - - - - - - - - - - -

.button (same as .small-button)

.tiny-button

.small-button

.medium-button

.large-button

Color

Color classes denote the purpose of the button, and are used to change its background color. The available color classes are:

- - - - - - - - - - - - - - - - -

none (same as .primary)

.primary

.secondary

.alert

.success

Border Radius

Radius classes cause the corners of the buttons to be rounded in clients that support the border-radius property. The available radius classes are:

- - - - - - - - - - -

none (no border-radius)

.radius

.round

Examples

Buttons expand to the width of their parent container by default, so it's recommended that you contain them within a sub-grid or a relatively small number of columns on the main grid.

- -
+ -