Ink - Responsive Email Documentation PDF

Ink: Responsive Email Documentation
http://zurb.com/ink/docs.php
Starting a new Ink project is fairly straightforward. If you aren't using one of our templates (templates.php), 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 <linkrel="stylesheet"href="ink.css"/> statement and paste your CSS into the <style> tag in the head before running your email through an inliner.
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1 strict.dtd"> <html(http://december.com/html/4/element/html.html)xmlns="http://www.w3.org/1999/xhtml"> <head(http://december.com/html/4/element/head.html)> <meta(http://december.com/html/4/element/meta.html)httpequiv="ContentType" content="text/html;charset=utf8"/> <meta(http://december.com/html/4/element/meta.html)name="viewport"content="width=device width"/> <link(http://december.com/html/4/element/link.html)rel="stylesheet"href="ink.css"><!For testingonly> <style(http://december.com/html/4/element/style.html)type="text/css"> /*Inkstylesgohereinproduction*/ </style(http://december.com/html/4/element/style.html)> <style(http://december.com/html/4/element/style.html)type="text/css"> /*Yourcustomstylesgohere*/ </style(http://december.com/html/4/element/style.html)> </head(http://december.com/html/4/element/head.html)> <body(http://december.com/html/4/element/body.html)> <table(http://december.com/html/4/element/table.html)class="body"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="center"align="center" valign="top"> <center> <!EmailContent> </center> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </body(http://december.com/html/4/element/body.html)> </html(http://december.com/html/4/element/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.
<html(http://december.com/html/4/element/html.html)>
1 de 18
12/11/2013 12:35
Ink: Responsive Email Documentation http://zurb.com/ink/docs.php ... <body(http://december.com/html/4/element/body.html)style="background:#ddd"> <table(http://december.com/html/4/element/table.html)class="body"style="background:#ddd"> <!Backgroundgoesheretoo> ... </table(http://december.com/html/4/element/table.html)> </body(http://december.com/html/4/element/body.html)>
body,.body{ background:#ddd; }
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:
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 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 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.
Basic example of the three main grid components.
<table(http://december.com/html/4/element/table.html)class="container"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> <table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapper">
2 de 18
12/11/2013 12:35
Ink: Responsive Email Documentation http://zurb.com/ink/docs.php <table(http://december.com/html/4/element/table.html) class="eightcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)>

EightColumns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="wrapperlast"> <table(http://december.com/html/4/element/table.html)class="fourcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> FourColumns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
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.
table.container table.row .eight.columns .four.columns
The main elements in the grid and how they're used:

Element Type table Class Name container Constrains the content to a 580px wrapper on large screens (95% on small screens) and centers it within the body. table td row wrapper Separates each row of content. Wraps each .columns table, in order to create a gutter between columns and force them to expand to full width on small screens. Description
3 de 18
12/11/2013 12:35

Element Type td Class Name last Description
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 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.
<table(http://december.com/html/4/element/table.html)class="container"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> <table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapperlast"> <table(http://december.com/html/4/element/table.html)class="twelvecolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="panel"> twelve.columns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> <table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapper"> <table(http://december.com/html/4/element/table.html)class="sixcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="panel"> .six.columns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)>
4 de 18
12/11/2013 12:35
Ink: Responsive Email Documentation <td(http://december.com/html/4/element/td.html) class="wrapperlast">
<table(http://december.com/html/4/element/table.html)class="sixcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="panel"> .six.columns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> ... </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
twelve.columns
.six.columns
.six.columns
.four.columns
.four.columns
.four.columns
.three.columns
.three.columns
.three.columns
.three.columns
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.
<table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapper"> <table(http://december.com/html/4/element/table.html)class="sixcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="centerpanel"> <center> Centeredcontent </center> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="wrapperlast"> <table(http://december.com/html/4/element/table.html)class="sixcolumns">
5 de 18
12/11/2013 12:35
Ink: Responsive Email Documentation <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="centerpanel"> <center>

<!Centeredimage> <img(http://december.com/html/4/element/img.html)class="center" src="http://placehold.it/125x125&text=Centered%20Image"> </center> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
Centered content
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.
<table(http://december.com/html/4/element/table.html)class="columns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> <!Contentnotlargeenoughto"prop"thecontaineropenalltheway> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td(http://december.com /html/4/element/td.html)><!Usedtofixcolumnsonsmallscreens> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
The grid works as expected in most major email clients, with some caveats in Gmail (Mobile, iOS, Android). Toggle Full Table
6 de 18
12/11/2013 12:35
While the Ink grid can't be nested like its Foundation counterpart (http://foundation.zurb.com/docs/components/grid.html), Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .subcolumns 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 .subcolumns <td> in the .columns <table> should be given a class of last in order for the gutter padding to be properly maintained.
<table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapper"> <table(http://december.com/html/4/element/table.html)class="eightcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="eightsubcolumns"> .eight.subcolumns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="foursubcolumnslast"> .four.subcolumns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="wrapperlast"> <table(http://december.com/html/4/element/table.html)class="fourcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> .fourcolumns </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
7 de 18
12/11/2013 12:35
.eight.sub-columns
.four.subcolumns
.four columns
The sub-grid works as expected in most major email clients. Toggle Full Table
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 blockgrid applied to it, along with a class in the pattern 'number-up' (ex. .twoup, .threeup, 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.
<table(http://december.com/html/4/element/table.html)class="container"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> <table(http://december.com/html/4/element/table.html)class="blockgridtwoup"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> Column#1 </td(http://december.com/html/4/element/td.html)><td(http://december.com/html/4 /element/td.html)><!Makesurethetagsaredirectlynexttoeachother> Column#2 </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)>
8 de 18
12/11/2013 12:35
Ink: Responsive Email Documentation </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
.two-up
.two-up
.three-up
.three-up
.three-up
.four-up
.four-up
.four-up
.four-up
.five-up
.five-up
.five-up
.five-up
.five-up
.six-up
.six-up
.six-up
.six-up
.six-up
.six-up
.seven-up
.seven-up
.seven-up
.seven-up
.seven-up
.seven-up
.seven-up
.eight-up .eight-up .eight-up .eight-up .eight-up .eight-up .eight-up .eight-up
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 .twoup 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.
<table(http://december.com/html/4/element/table.html)class="container"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> <table(http://december.com/html/4/element/table.html)class="blockgridtwoup"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> MainContent </td(http://december.com/html/4/element/td.html)><td(http://december.com/html/4 /element/td.html)> RightSidebar </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)>
9 de 18
12/11/2013 12:35
Ink: Responsive Email Documentation </table(http://december.com/html/4/element/table.html)>

</td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
@mediaonlyscreenand(maxwidth:600px){ table[class="container"].blockgridtd{ width:100%!important; } }
The block-grid works as expected in most major email clients. Toggle Full Table
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 image, be sure to apply it to the parent element, not to the image itself.
<table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapperlast"> <table(http://december.com/html/4/element/table.html)class="twelvecolumnsshowfor small"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="panel"> .showforsmall </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> <table(http://december.com/html/4/element/table.html)class="twelvecolumnshidefor small"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="panel"> .hideforsmall </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)>
10 de 18
12/11/2013 12:35

</td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
.hide-for-small
Available visibility classes:

.hideforsmall .showforsmall
Visibility classes work as expected in most major email clients, but do not currently support Gmail. Toggle Full Table
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.
<table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapper"> <table(http://december.com/html/4/element/table.html)class="eightcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> Maincontent </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)>
11 de 18
12/11/2013 12:35

</td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="wrapperlast"> <table(http://december.com/html/4/element/table.html)class="fourcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="panel"> Panelcontent </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
Main content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae.
Panel content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo.
Panels work as expected in most major email clients. Toggle Full Table
12 de 18
12/11/2013 12:35
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. 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 (block-grid) element.
<a(http://december.com/html/4/element/a.html)class="button"href="#"> <table(http://december.com/html/4/element/table.html)> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> ButtonLabel </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </a(http://december.com/html/4/element/a.html)>
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 classes affect the button's vertical padding. The available size classes are:
.button (same as .smallbutton) .tinybutton .smallbutton .mediumbutton .largebutton
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
Radius classes cause the corners of the buttons to be rounded in clients that support the borderradius property. The available radius classes are:
none (no border-radius) .radius
13 de 18
12/11/2013 12:35

.round
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.
All the button modifiers demonstrated. The first two rows of buttons are contained to .four.columns sections of the grid, and the second two rows are contained to .six.columns sections for clarity.
.tiny-button
.radius.button
.primary.button
.small-button
.round.button
.secondary.button
.medium-button
.alert.button
.success.button
The buttons are unavailable in Microsoft Outlook (2007, 2010, 2013). A fix is on the way. Toggle Full Table
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).
14 de 18
12/11/2013 12:35

<table(http://december.com/html/4/element/table.html)class="threecolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> <img(http://december.com/html/4/element/img.html)height="130"width="130" src="http://placehold.it/600x600&text=Retina">
</td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td(http://december.com /html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
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 1 2 3 4 5 6 7 8 9 10 11 12 Internal Width (in px) 30 80 130 180 230 280 330 380 430 480 530 580
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.
<table(http://december.com/html/4/element/table.html)class="row"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)class="wrapper"> <table(http://december.com/html/4/element/table.html)class="threecolumns"> <tr(http://december.com/html/4/element/tr.html)>
15 de 18
12/11/2013 12:35
Ink: Responsive Email Documentation <td(http://december.com/html/4/element/td.html)>
<img(http://december.com/html/4/element/img.html)height="130"width="130" src="http://placehold.it/600x600&text=Retina%20Image"> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="wrapperlast"> <table(http://december.com/html/4/element/table.html)class="ninecolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)> TextContent </td(http://december.com/html/4/element/td.html)> <td(http://december.com/html/4/element/td.html)class="expander"></td (http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)> </td(http://december.com/html/4/element/td.html)> </tr(http://december.com/html/4/element/tr.html)> </table(http://december.com/html/4/element/table.html)>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, mollitia, vero tempore consectetur similique perspiciatis nisi nulla neque modi facilis. Eveniet, cupiditate, recusandae quasi repellat alias dolorem qui possimus et. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, doloremque, amet, cupiditate explicabo magni dolores aliquam dicta enim voluptatibus hic optio neque quasi officia culpa minima numquam iusto illo dolorem?
Panels work as expected in most major email clients. Toggle Full Table
Sign up to receive monthly Responsive Emails highlights.
16 de 18
12/11/2013 12:35
Home (index.php) Process (process.php) Docs (docs.php) Email Templates (templates.php)
17 de 18
12/11/2013 12:35
(http://www.twitter.com (http://www.facebo (http://zur /ZURB) /ZURB) /contact)
19982013 ZURB, Inc. All rights reserved.
18 de 18
12/11/2013 12:35

Ink - Responsive Email Documentation PDF

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ink - Responsive Email Documentation PDF

Загружено:

Авторское право:

Доступные форматы

Ink: Responsive Email Documentation

Basic example of the three main grid components.

Ink: Responsive Email Documentation http://zurb.com/ink/docs.php <table(http://december.com/html/4/element/table.html) class="eightcolumns"> <tr(http://december.com/html/4/element/tr.html)> <td(http://december.com/html/4/element/td.html)>

table.container table.row .eight.columns .four.columns

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