<h4 class="normal">Panels With Sub-grids</h4>
<p>Nesting a sub-grid under a panel is non-intuitive, since the sub-grid columns would normally be applied to the <kbd><td></kbd> elements directly under the <code>.columns</code> table. To get around this, give the <kbd><td></kbd> a class of <code>.panel</code> and a class of <code>.sub-grid</code>. You can then put a <kbd><table></kbd> inside the <kbd><td></kbd> and create the sub-columns using the <kbd><td></kbd> elements of the inner table, as shown below.</p>
<h6>Panel Sub-Grid Markup</h6>
<?php
code_example('<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>', 'html');
?>
<br>
<h6>Sub-Grid Panel</h6>
<iframe id="if-panelSubGrid" src="docs/examples/panel-sub-grid.html"></iframe>
code_example('<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>', 'html');
code_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>', 'html');
<h1 id="buttons" data-magellan-destination="buttons" class="light">Buttons</h1>
<p class="lead">Dynamic and effective calls to action.</p>
<hr />
<h2 class="light">Structure</h2>
<p>To create buttons that look great in most clients, make a table of class <code>button</code> to wrap your <kbd><a></kbd> 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 <a href="#sub-grid">sub-grid</a> or <a href="#block-grid">block-grid</a> element.</p>
<h6>A Basic Button</h6>
<?php
code_example('<table class="button">
<tr>
<td>
<a href="#">Button Label</a>
</td>
</tr>
</table>', 'html');
?>
<br>
<hr />
<h2 class="light">Style Classes</h2>
<p>Several built in styling classes can be applied to the same element as the <code>button</code> class is applied to in order to adjust the button's appearance.</p>
<h4 class="normal">Size</h4>
<p>Size classes affect the button's vertical padding. The available size classes are:</p>
<table>
<tr>
<td><code>.button</code> (same as <code>.small-button</code>)</td>
</tr>
<tr>
<td><code>.tiny-button</code></td>
</tr>
<tr>
<td><code>.small-button</code></td>
</tr>
code_example('<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>', 'html');
<br>
<h6>Full Width Row</h6>
<p>In the example below, the rows have a white background, while the body is light blue.</p>
<iframe id="if-fullWidth" src="docs/examples/full-width.html"></iframe>
<br>
<br>
<h4 class="normal">Expanders</h4>
<p>When the Ink grid is shown on a small screen, the <code>.columns</code> 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 <code>.columns</code> table or are centering the content.</p>
<p>To get around this, an empty <kbd><td></kbd> with a class of <code>expander</code> is used after the <kbd><td></kbd> containing the actual content in the <code>.columns</code> table. This extra <kbd><td></kbd> isn't displayed, but it forces the content <kbd><td></kbd> to expand to full width.</p>
<h6>Expander TDs</h6>
<?php
code_example('<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>', 'html');
?>
<br>
<hr />
<h2 class="light">Compatibility</h2>
<div class="compatibility-section">
<div class="row">
<div class="large-9 columns">
<p>The grid works as expected in most major email clients, with some caveats in <strong>Gmail (Mobile, iOS, Android)</strong>.</p>
</div>
<div class="large-3 columns">
<a href="#" class="reveal-table">Toggle Full Table</a>
Right Sidebar
</td>
</tr>
</table>
</td>
</tr>
</table>', 'html');
?>
<br>
<h6>Block-Grid Column Progressive Enhancement (Optional)</h6>
<?php
code_example('@media only screen and (max-width: 600px) {
table[class="container"] .block-grid td {
width: 100% !important;
}
}', 'css');
?>
<br>
<!-- <h4 class="normal">Horizontal Navigation</h4>
<p></p> -->
<hr />
<h2 class="light">Compatibility</h2>
<div class="compatibility-section">
<div class="row">
<div class="large-9 columns">
<p>The block-grid works as expected in most major email clients.</p>
</div>
<div class="large-3 columns">
<a href="#" class="reveal-table">Toggle Full Table</a>
<h6>Inline Styles</h6>
<?php
code_example('<html>
...
<body style="background:#ddd">
<table class="body" style="background:#ddd"> <!-- Background goes here too -->
...
</table>
</body>', 'html');
?>
<br>
<h6>CSS</h6>
<?php
code_example('body, .body {
background: #ddd;
}', 'css');
?>
<br>
<hr>
<h2 class="light">Sending Your Email</h2>
<p>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.</p>
<p>To get the best results, we recommend that you send your HTML email using an <a href="http://en.wikipedia.org/wiki/Email_service_provider_(marketing)">Email Service Provider (ESP)</a> such as <a href="http://mailchimp.com">Mailchimp</a> or <a href="http://campaignmonitor.com">Campaign Monitor</a>. 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 <a href="http://php.net/manual/en/function.mail.php">PHP</a> or <a href="http://ruby-doc.org/stdlib-2.0/libdoc/net/smtp/rdoc/Net/SMTP.html">Ruby</a> usually works fine.</p>
<hr>
<h2 class="light">Testing and Troubleshooting</h2>
<p>Since targeting a <a href="#compatibility">diverse range of email clients</a> 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 <a href="http://google.com/chrome">Chrome</a>, <a href="http://www.apple.com/safari/">Safari</a> or <a href="http://www.opera.com/">Opera</a>, since Ink doesn’t always display properly in Firefox or Internet Explorer.</p>
<p>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 <a href="https://litmus.com/">Litmus</a> or <a href="http://www.emailonacid.com/">Email on Acid</a> can help.</p>
<p>If you're having trouble with an email, the first thing to check is the markup. Often times a simple error like a forgotten <kbd><tr></kbd> 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. <strong>Some senders prepend an <kbd><html></kbd> tag to your message, which causes the DOCTYPE tag to not be interpreted by the email recipient.</strong> 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.</p>