<h1 id="buttons" data-magellan-destination="buttons" class="light">Buttons</h1>
-<!-- <p class="lead">Dynamic and effective calls to action.</p>
+<p class="lead">Dynamic and effective calls to action.</p>
<hr />
<h2 class="light">Structure</h2>
-<h4 class="normal">Style One: The Preferred Method* <small>Does not work with <a href="#">Premailer</a>.</small></h4>
-<p>To create buttons that look great in most clients, give a class of <code>button</code> to an <kbd><a></kbd> 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 <kbd><a></kbd> tag) to wrap a table element (booooooooo!).</p>
-<script type="text/javascript" src="https://snipt.net/embed/6ba14740d872d10cd5da2e04c65350c6/"></script>
-<br>
-<h4 class="normal">Style Two: The Bulletproof Method* <small>Not yet implemented.</small></h4>
-<p>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 <kbd><table></kbd> of class <code>button</code> and putting your <kbd><a></kbd> inside that, you'll have a nice looking button that won't break <a href="#">Premailer</a>. This method comes at a cost, however, as the click target only covers the button text, rather than the entire button.</p>
-<script type="text/javascript" src="https://snipt.net/embed/d73c0ffa28c3d602cef080776bec7095/"></script>
-<br>
+<p>To create buttons that look great in most clients, give a class of <code>button</code> to an <kbd><a></kbd> 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 <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(
+'<a class="button" href="#">
+ <table>
+ <tr>
+ <td>
+ Button Label
+ </td>
+ </tr>
+ </table>
+</a>'
+ , '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>
<hr />
<h2 class="light">Examples</h2>
<p>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.</p>
-<script type="text/javascript" src="https://snipt.net/embed/4544d214e092be6a5c073504ad1d6443/"></script>
-<br> -->
\ No newline at end of file
+<h6>Button Demo</h6>
+<p>All the button modifiers demonstrated. The first two rows of buttons are contained to <code>.four.columns</code> sections of the grid, and the second two rows are contained to <code>.six.columns</code> sections for clarity.</p>
+<iframe id="if-buttons" src="docs/examples/buttons.html"></iframe>
+<br>
\ No newline at end of file
#if-centerClass {height: 220px;}
#if-visibilityClasses {height: 110px;}
#if-panels {height: 110px;}
+ #if-buttons{height: 325px;}
@media only screen and (max-width: 632px), only screen and (min-width: 768px) and (max-width: 843px) {
#if-basicGrid {height: 225px;}
#if-centerClass {height: 270px;}
#if-visibilityClasses {height: 110px;}
#if-panels {height: 150px;}
+ #if-buttons{height: 650px;}
}
</style>
<div class="row docs">
<div class="large-3 columns">
- <div data-magellan-expedition="fixed">
+ <div class="doc-nav">
<ul class="sub-nav hide-for-small">
- <li data-magellan-arrival="start"><a href="#start">Getting Started</a></li>
- <li data-magellan-arrival="grid"><a href="#grid">Grid</a></li>
- <li data-magellan-arrival="sub-grid"><a href="#sub-grid">Sub-Grid</a></li>
- <li data-magellan-arrival="visibility-classes"><a href="#visibility-classes">Visibility Classes</a></li>
- <li data-magellan-arrival="panels"><a href="#panels">Panels</a></li>
- <li data-magellan-arrival="buttons"><a href="#buttons">Buttons</a></li>
- <li data-magellan-arrival="compatibility"><a href="#compatibility">Compatibility</a></li>
+ <li><a href="#start">Getting Started</a></li>
+ <li><a href="#grid">Grid</a></li>
+ <li><a href="#sub-grid">Sub-Grid</a></li>
+ <li><a href="#visibility-classes">Visibility Classes</a></li>
+ <li><a href="#panels">Panels</a></li>
+ <li><a href="#buttons">Buttons</a></li>
</ul>
</div>
</div>
<?php require 'components/buttons.php' ?>
- <!-- <hr class="section">
-
- <h1 id="compatibility" class="light">Compatibility</h1>
- <p class="lead">Here's a breakdown of the email clients that we’ve optimized Ink for.</p>
- <hr />
- <table>
- <thead>
- <tr>
- <th width="40%">Client</th>
- <th width="20%"><span>The Grid</span></th>
- <th width="20%"><span>UI Elements</span></th>
- <th width="20%"><span>Visibility Classes</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Gmail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Gmail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Gmail (iOS)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Gmail (Android)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Yahoo! Mail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Yahoo! Mail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Mail (iOS)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Mail (OSX)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Mail (Android)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook Express</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook 2003</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook 2007, 2010, 2013</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Outlook 2011 for Mac</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Hotmail (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Hotmail (Mobile)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Thunderbird</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Sparrow (iOS)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Sparrow (Desktop)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Entourage (2004)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Entourage (2008)</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Windows Mail</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- <tr>
- <td>Live Mail</td>
- <td><span class="check">✔</span></td>
- <td><span class="x">✘</span></td>
- <td><span class="check">✔</span></td>
- </tr>
- </tbody>
- </table>
-
<br>
<br>
- <br> -->
</div>
</div>
\ No newline at end of file
--- /dev/null
+<!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"/>
+ <style>
+
+ /* Include ink.css */
+
+ /* Custom styles go here */
+
+ body {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ }
+ </style>
+</head>
+<body>
+ <table class="body">
+ <tr>
+ <td class="center" align="center" valign="top">
+ <center>
+
+
+ <!-- EXAMPLE CODE -->
+
+ <table class="container">
+ <tr>
+ <td>
+
+ <table class="row">
+ <tr>
+ <td class="wrapper">
+
+ <table class="four columns">
+ <tr>
+ <td>
+
+ <a class="tiny-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .tiny-button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper">
+
+ <table class="four columns">
+ <tr>
+ <td>
+
+ <a class="primary button" href="#">
+ <table>
+ <tr>
+ <td>
+ .primary.button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="four columns">
+ <tr>
+ <td>
+
+ <a class="radius button" href="#">
+ <table>
+ <tr>
+ <td>
+ .radius.button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <table class="row">
+ <tr>
+ <td class="wrapper">
+
+ <table class="four columns">
+ <tr>
+ <td>
+
+ <a class="small-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .small-button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper">
+
+ <table class="four columns">
+ <tr>
+ <td>
+
+ <a class="secondary button" href="#">
+ <table>
+ <tr>
+ <td>
+ .secondary.button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="four columns">
+ <tr>
+ <td>
+
+ <a class="round button" href="#">
+ <table>
+ <tr>
+ <td>
+ .round.button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <table class="row">
+ <tr>
+ <td class="wrapper">
+
+ <table class="six columns">
+ <tr>
+ <td>
+
+ <a class="medium-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .medium-button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="six columns">
+ <tr>
+ <td>
+
+ <a class="alert button" href="#">
+ <table>
+ <tr>
+ <td>
+ .alert.button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <table class="row">
+ <tr>
+ <td class="wrapper">
+
+ <table class="six columns">
+ <tr>
+ <td>
+
+ <a class="large-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .large-button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="six columns">
+ <tr>
+ <td>
+
+ <a class="success button" href="#">
+ <table>
+ <tr>
+ <td>
+ .success.button
+ </td>
+ </tr>
+ </table>
+ </a>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <!-- END EXAMPLE CODE -->
+
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
\ No newline at end of file
projects / thirdparty / foundation / foundation-emails.git / commitdiff
