Menu-wht

Ink

Documentation

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>

    <link rel="stylesheet" href="ink.css"> <!-- For testing only -->

    <style type="text/css">
     
      /* Ink styles go here in production */
     
    </style>
    <style type="text/css">

      /* Your custom styles go here */

    </style>
  </head>
  <body>
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>

          <!-- Email Content -->

          </center>
        </td>
      </tr>
    </table>
  </body>
</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>
   
...
   
<body style="background:#ddd">
  <table class="body" style="background:#ddd"> <!-- Background goes here too -->
       
    ...
       
  </table>
</body>

CSS
body, .body {
  background: #ddd;
}


Sending Your Email

Sending HTML email is a lot different than sending plain text email. While it may be tempting to just open the email in a browser and click “share” or to use the “Insert HTML” function of your favorite email client, this often strips off a lot of the styling and makes your email completely unusable on mobile devices.

To get the best results, we recommend that you send your HTML email using an Email Service Provider (ESP) such as Mailchimp or Campaign Monitor. If you’re just running a quick test and don't want to sign up for an ESP, sending from the command line using a scripting language like PHP or Ruby usually works fine.


Testing and Troubleshooting

Since targeting a diverse range of email clients requires some specific and rather quirky markup, Ink doesn’t always preview properly in the browser. When doing browser tests, we recommend using the latest version of Chrome, Safari or Opera, since Ink doesn’t always display properly in Firefox or Internet Explorer.

Testing in the browser isn't enough, however, and you should always test in actual email clients. If you don't have access to the actual clients you want to test, a testing service like Litmus or Email on Acid can help.

If you're having trouble with an email, the first thing to check is the markup. Often times a simple error like a forgotten <tr> or a nested tag that’s been closed in the wrong order can wreak havoc on your design. If that’s not the problem, it could be an issue with your ESP. Some senders prepend an <html> tag to your message, which causes the DOCTYPE tag to not be interpreted by the email recipient. To see if this is what’s happening, try sending a test email to yourself and using the “show original” or “raw source” option in your mail client to manually inspect the code.


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

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.

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper">

            <table class="eight columns">
              <tr>
                <td>

                  Eight Columns

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
          <td class="wrapper last">

            <table class="four columns">
              <tr>
                <td>

                  Four Columns

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Visual Explanation of Grid

Diagram of how the basic grid is laid out. While Ink was used to create the example (and therefore it responds to the correct media queries), extra coloring and spacing was added for clarity.



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

Ink's 12-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
<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper last">

            <table class="twelve columns">
              <tr>
                <td class="panel">

                  twelve.columns
               
                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

      <table class="row">
        <tr>
          <td class="wrapper">

            <table class="six columns">
              <tr>
                <td class="panel">

                  .six.columns
               
                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
          <td class="wrapper last">

            <table class="six columns">
              <tr>
                <td class="panel">

                  .six.columns

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

      ...

    </td>
  </tr>
</table>

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 recommend using the HTML <center> tag around the content you wish to center.

The Center Class
<table class="row">
  <tr>
    <td class="wrapper">

      <table class="six columns">
        <tr>
          <td class="center panel">
            <center>

              Centered content

            </center>
          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
    <td class="wrapper last">

      <table class="six columns">
        <tr>
          <td class="center panel">
            <center>

              <!-- Centered image -->
              <img class="center" src="http://placehold.it/125x125&text=Centered%20Image">

            </center>
          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Centered Text and Images


Offset Columns

In lieu of using empty columns to offset content, one can use the .offset-by-{number of columns} helper class (ex,.offset-by-two, .offset-by-three, etc). By applying the class to the wrapper surrounding a column section, the content will be pushed to the left by the specified number of columns. Remember to count any column offsets towards the total number of columns in a row when making sure that they add up to 12.

Offset Columns Markup
<table class="row">
  <tr>
    <td class="wrapper offset-by-four">
   
      <table class="eight columns">
        <tr>
          <td class="panel">

            Offset Content

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Offset Example


Text Padding

A fairly common use case for the container is to give your text a white background to separate it from a colored email body. To assist with this design pattern, we've included three helper classes with Ink: .text-pad, .left-text-pad and .right-text-pad.

The .text-pad class provides 10px of padding on either side of the content (while it's named text-pad, it works just as well on buttons or images), making sure it doesn't butt right up against the edge of your container. The .text-pad class should be applied to the <td> of a .columns <table>.

The .left-text-pad and .right-text-pad do the same thing as the .text-pad class, but are meant to be applied to content that doesn't extend across the entire row (in other words, content that isn't twelve columns wide). The directional text-padding classes only apply the padding to the side of the content near the edge of the container on large screens, but apply it to both sides on small screens, when the columns expand to fill the full width of the row.

The Text-Pad Class
<table class="row">
  <tr>
    <td class="wrapper">

      <table class="four columns">
        <tr>
          <td class="left-text-pad">

            Text

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
    <td class="wrapper">

      <table class="four columns">
        <tr>
          <td>

            Text

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
    <td class="wrapper last">

      <table class="four columns">
        <tr>
          <td class="right-text-pad">

            Text

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Container Backgrounds

Visual example of the body and the container having different colored backgrounds, the main use case for .text-pad.



Full-Width Rows

When working with designs that call for a container that's colored to stand out from the background (like the example above), it can often be helpful to have full-width rows that can be styled separately, especially for elements like headers or ad breaks. Since the rows of the Ink grid are usually restrained to the width of the container, this design pattern requires a slightly different syntax than normal.

To create a full-width row, just follow this process:

  1. Create a standard “container > row > column” block.
  2. Swap the .row and .container classes, keeping the tables in the same place.
  3. Add center code to the outside (.row) table.

The row should now extend to the edge of the viewport, while the content is still restricted to the width of the container, so both can be styled accordingly.

Reverse Row Syntax
<table class="row"> <!-- Styles go on the row -->
  <tr>
    <td class="center" align="center"> <!-- Center the container -->
      <center>

        <table class="container"> <!-- Container restricts the content width -->
          <tr>
            <td class="wrapper last"> <!-- Wrapper stays on the inner table -->

              <table class="twelve columns">
                <tr>
                  <td>

                    Content

                  </td>
                  <td class="expander"></td>
                </tr>
              </table>

            </td>
          </tr>
        </table>

      </center>
    </td>
  </tr>
</table>

Full Width Row

In the example below, the rows have a white background, while the body is light blue.



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
<table class="columns">
  <tr>
    <td>
      <!-- Content not large enough to "prop" the container open all the way -->
    </td>

    <td class="expander"></td> <!-- Used to fix columns on small screens -->

  </tr>
</table>


Compatibility

The grid works as expected in most major email clients, with some caveats in Gmail (Mobile, iOS, Android).

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile, iOS, Android) Since Gmail doesn't support media queries, users will be presented with the desktop view. If mobile Gmail is a large part of your audience, we'd suggest using a layout based on the block-grid.
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com Be sure to use <center> tags in addition to the center class in order to center content properly.

Sub-Grid

A non-stacking grid for even more versatile layouts.


Grids Within Grids

While the Ink grid can't be 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.

Basic Sub-Grid Example
<table class="row">
  <tr>
    <td class="wrapper">

      <table class="eight columns">
        <tr>
          <td class="eight sub-columns">

            .eight.sub-columns

          </td>
          <td class="four sub-columns last">

            .four.sub-columns

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
    <td class="wrapper last">

      <table class="four columns">
        <tr>
          <td>

            .four columns

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Non-Collapsing Sub-Grid Columns


Compatibility

The sub-grid works as expected in most major email clients.

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile, iOS, Android)
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com

Block-Grid

An even-width element grid that doesn't use media queries.


Evenly Spaced Blocks

For cases where neither the Ink grid nor the Ink sub-grid is appropriate, the block-grid can often be quite useful. Block-grid elements automatically align to the left and are pushed down to the next row individually as the viewport gets smaller...all without using media queries.

Block-grids consist of a table with class block-grid applied to it, along with a class in the pattern 'number-up' (ex. .two-up, .three-up, etc.) to describe how many even-sized elements should be placed per row. Extra care should be taken to ensure that there aren't any whitespace characters or newlines between the closing <td> of a block-grid element and the opening <td> of the preceding element, since some clients will render the whitespace as a gap between the elements.

Basic Block-Grid Markup
<table class="container">
  <tr>
    <td>

      <table class="block-grid two-up">
        <tr>
          <td>

            Column #1

          </td><td> <!-- Make sure the tags are directly next to each other -->

            Column #2

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Visual Example of Block-Grids


Examples

Multi-column Layouts in Gmail

A major use case for block-grids, since they don't rely on media queries, is to create multi-column layouts for Gmail. The simplest way to accomplish this is to create a .two-up block-grid and use the block-grid elements as your column structures. As a progressive enhancement, adding a media query that expands the columns to 100% width under 600px would cause the columns to take up the whole screen on mobile clients that support media queries, while not breaking the reflow pattern for those that don't.

Gmail Two Column Layout
<table class="container">
  <tr>
    <td>

      <table class="block-grid two-up">
        <tr>
          <td>

            Main Content

          </td><td>

            Right Sidebar

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Block-Grid Column Progressive Enhancement (Optional)
@media only screen and (max-width: 600px) {
  table[class="container"] .block-grid td {
    width: 100% !important;
  }
}


Compatibility

The block-grid works as expected in most major email clients.

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird Make sure that there isn't any whitespace between your <td> elements, otherwise Thunderbird will add a gap between your block-grid elements.
Android
Gmail (Desktop)
Gmail (Mobile, iOS, Android)
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com

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. Due to Outlook's lack of support for certain CSS properties, the Ink visibiility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007/2010/2013.

Note: If you're using a visibility class on an image, be sure to apply it to the parent element, not to the image itself.

Using Visibility Classes
<table class="row">
  <tr>
    <td class="wrapper last">

      <!--[if !mso]><!-- -->
        <table class="twelve columns show-for-small">
          <tr>
            <td class="panel">

              .show-for-small
             
            </td>
            <td class="expander"></td>
          </tr>
        </table>
      <!--<![endif]-->

      <table class="twelve columns hide-for-small">
        <tr>
          <td class="panel">

            .hide-for-small

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Content Visibility


Breakdown

Available visibility classes:

.hide-for-small
.show-for-small


Compatibility

Visibility classes work as expected in most major email clients, but do not currently support Gmail.

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop) Not yet implemented. Support will be added soon.
Gmail (Mobile, iOS, Android) Not yet implemented. Support will be added soon.
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com

Panels

Quickly highlight important content.


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

Panel Markup
<table class="twelve columns">
  <tr>
    <td class="panel">

      Panel content

    </td>
    <td class="expander"></td>
  </tr>
</table>

Panel Example


Examples

Sidebar Panel

A common patten is to have a panel section serve as a sidebar to offset it from the primary content.

Sidebar Panel Markup
<table class="row">
  <tr>
    <td class="wrapper">

      <table class="eight columns">
        <tr>
          <td>

            Main content

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
    <td class="wrapper last">

      <table class="four columns">
        <tr>
          <td class="panel">

            Panel content

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Sidebar Panel


Panels With Sub-grids

Nesting a sub-grid under a panel is non-intuitive, since the sub-grid columns would normally be applied to the <td> elements directly under the .columns table. To get around this, give the <td> a class of .panel and a class of .sub-grid. You can then put a <table> inside the <td> and create the sub-columns using the <td> elements of the inner table, as shown below.

Panel Sub-Grid Markup
<table class="twelve columns">
  <tr>
    <td class="panel sub-grid">

      <table>
        <tr>
          <td class="six sub-columns">
           
            Left Sub-Column

          </td>
          <td class="six sub-columns">
           
            Right Sub-Column

          </td>
        </tr>
      </table>

    </td>
    <td class="expander"></td>
  </tr>
</table>

Sub-Grid Panel


Compatibility

Panels work as expected in most major email clients.

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile, iOS, Android)
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com

Buttons

Dynamic and effective calls to action.


Structure

To create buttons that look great in most clients, make a table of class button to wrap your <a> tag. Buttons expand to the full width of their container by default, so if you don't want them to expand all the way, consider placing them in a sub-grid or block-grid element.

A Basic Button
<table class="button">
  <tr>
    <td>
      <a href="#">Button Label</a>
    </td>
  </tr>
</table>


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.

Button Demo

All the button modifiers demonstrated. The rows of buttons are contained to .four.columns or .six.columns sections of the grid for clarity.



Compatibility

The buttons are compatible with most major clients.

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile, iOS, Android)
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com

Retina Images

Accent your emails with rich, high resolution images.


Markup

The days of having to choose between supporting Outlook or retina devices are over. To use high resolution images, put height and width HTML attributes on the <img> tag, corresponding to the scaled size of the image in a desktop view (the width of its .columns container). On small screen devices, Ink will cause the image to expand to its full width (or the width or its parent element, whichever is smaller).

Image Markup
<table class="three columns">
  <tr>
    <td>

      <img height="130" width="130" src="http://placehold.it/600x600&text=Retina">

    </td>
    <td class="expander"></td>
  </tr>
</table>


Column Sizes

Below is a chart of the sizes images should be to fully fit various sizes of grid columns on a desktop (larger than 600px) view. Height should be determined with respect to width and should also be explicitly declared on the <img> tag.

Number of Columns Internal Width (in px)
1 30
2 80
3 130
4 180
5 230
6 280
7 330
8 380
9 430
10 480
11 530
12 580

Examples

Newsletter Images

A common pattern in email newsletters is to have an image on the left with description text next to it. We use this layout quite frequently on ZURB emails and thought that it looked awkward when the small image begins to float in the center of the screen on mobile devices. To compensate for this, we use a full-width image that's scaled down on the desktop view.

Newsletter 3-9 Image
<table class="row">
  <tr>
    <td class="wrapper">

      <table class="three columns">
        <tr>
          <td>

            <img height="130" width="130" src="http://placehold.it/600x600&text=Retina%20Image">

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
    <td class="wrapper last">

      <table class="nine columns">
        <tr>
          <td>

            Text Content

          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Retina Newsletter Image Demo


Compatibility

Retina images work as expected in most major email clients, with some caveats in Gmail (Mobile, iOS, Android).

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile, iOS, Android) Since the inline sizing will not be overwritten in mobile Gmail, retina images should not be used with block-grid based layouts (they're fine with the standard grid.
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com

Supported Clients

We test and support all the major email clients … even Outlook.


We support as many email clients and as much of the market as possible, however, we simply can't test for everything. As a result, we've decided to test the following clients, based on a combination of their market share and our ability to reliably test them with the devices and software we have access to.

While we will help out as much as possible with issues regarding other clients (and are more than willing to accept pull requests that add support for additional clients), we can't devote a lot of time or effort at this point to fixing issues related to email clients not in the following table.

Tested Clients

Client Supported Notes
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile, iOS, Android) Does not fully support the Ink grid. Responsive layouts should be accomplished using the block-grid.
Outlook 2011 for Mac
AOL Mail
Hotmail
Outlook.com

Changelog

All the latest and greatest changes to Ink.


1.0 - Public Release

1.0.5
  • Add .sub-grid class to enable the use of sub-grids with panels
  • Add paragraph .lede class
  • Lower specificity on .panel class to allw its use on <div>s
  • Partially patch docs examples to work in Firefox
  • Normalize font rendering in <td>s for Outlook 2007/2010/2013
  • Fix 100% width issue on iPad
  • Remove offset-sub-columns
  • Remove proprietary <unsubscribe> tags from templates
  • Fix issue with .one.sub-columns sections
  • Expand the Getting Started section of the docs
  • Add full-width row example to the docs
  • Add offset-columns example to the docs
  • Add additional panel examples to the docs
  • Miscellaneous bug fixes and typo fixes
1.0.4
  • Apply font styles more uniformly to fix clients that strip out the <body> tag (fixes inliner preview)
  • Remove percentage based padding on sub-grid (fixes Outlook 2000/2002/2003)
  • Add Bower package metadata
  • Remove min-width for <center> tags nested under the sub-grid
  • Add helper aliases to .text-pad classes (ex. .left-text-pad can now be called using .text-pad-left)
  • Fix .text-pad classes nested under aliased .column tables
  • Remove deprecated button syntax
  • Fix link color in headings for Outlook 2007/2010/2013
1.0.3
  • Add text-pad classes
  • Lower heading sizes to more reasonable defaults
  • Add compatibility chart of supported/tested clients to the docs
1.0.2
  • Switch to new button syntax to fully support Microsoft Outlook
  • Add changelog to Docs
1.0.1
  • Fix crushed-image issue in Gmail (mobile, Android, iOS) by adding a min-width to <center> tags
1.0.0
  • Initial Launch
  • Grid
  • Sub-Grid
  • Block-Grid
  • Buttons
  • Panels
  • Retina Images


Responsive Email Design Training

We practice Responsive Email Design daily at ZURB, sending out 10 email newsletter campaigns a month and creating email templates for our clients. We even built Ink to help us and others send emails. This course covers the basics that designers and developers — even marketers — should know to get started with responsive emails.

View Course
Stay updated on Ink with Responsive Emails from ZURB.

Sign up to receive monthly Responsive Emails highlights.