Add section to docs dealing with retina images

diff --git a/docs/components/block-grid.php b/docs/components/block-grid.php
index a42e33ba7a52ddc1ab4a60dd5616de635f466caa..00b9b6b4f3f8df3d5cb12ea22547563001dde9aa 100644 (file)
--- a/docs/components/block-grid.php
+++ b/docs/components/block-grid.php
@@ -71,6 +71,7 @@
   }
 }',
 'css') ?>
+<br>
 <!-- <h4 class="normal">Horizontal Navigation</h4>
 <p></p> -->
 <hr />

diff --git a/docs/components/images.php b/docs/components/images.php
new file mode 100644 (file)
index 0000000..5dba320
--- /dev/null
+++ b/docs/components/images.php
@@ -0,0 +1,212 @@
+<h1 id="images" class="light">Retina Images</h1>
+<p class="lead">Accent your emails with rich, high resolution images.</p>
+<hr />
+<h2 class="light">Markup</h2>
+<p>The days of having to choose between supporting Outlook or retina devices are over.  To use high resolution images, put <code>height</code> and <code>width</code> HTML attributes on the <kbd>&lt;img&gt;</kbd> tag, corresponding to the scaled size of the image in a desktop view (the width of its <code>.columns</code> 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).</p>
+<h6>Image Markup</h6>
+<?php code_example(
+'<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>',
+'html') ?>
+<br>
+<hr />
+<h2 class="light">Column Sizes</h2>
+<p>Below is a chart of the sizes images should be to fully fit vatious 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 <kbd>&lt;img&gt;</kbd> tag.</p>
+<table>
+  <thead>
+    <td>Number of Columns</td>
+    <td>Internal Width (in px)</td>
+  </thead>
+  <tr>
+    <td>1</td>
+    <td>30</td>
+  </tr>
+  <tr>
+    <td>2</td>
+    <td>80</td>
+  </tr>
+  <tr>
+    <td>3</td>
+    <td>130</td>
+  </tr>
+  <tr>
+    <td>4</td>
+    <td>180</td>
+  </tr>
+  <tr>
+    <td>5</td>
+    <td>230</td>
+  </tr>
+  <tr>
+    <td>6</td>
+    <td>280</td>
+  </tr>
+  <tr>
+    <td>7</td>
+    <td>330</td>
+  </tr>
+  <tr>
+    <td>8</td>
+    <td>380</td>
+  </tr>
+  <tr>
+    <td>9</td>
+    <td>430</td>
+  </tr>
+  <tr>
+    <td>10</td>
+    <td>480</td>
+  </tr>
+  <tr>
+    <td>11</td>
+    <td>530</td>
+  </tr>
+  <tr>
+    <td>12</td>
+    <td>580</td>
+  </tr>
+</table>
+<hr />
+<h2 class="light">Examples</h2>
+<h4 class="normal">Newsletter Images</h4>
+<p>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.</p>
+<h6>Newsletter 3-9 Image</h6>
+<?php 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') ?>
+<br>
+<h6>Retina Newsletter Image Demo</h6>
+<iframe id="if-images" src="docs/examples/images.html"></iframe>
+<br>
+<hr />
+<h2 class="light">Compatibility</h2>
+<div class="compatibility-section">
+  <div class="row">
+    <div class="large-9 columns">
+      <p>Panels work as expected in most major email clients.</p>
+    </div>
+    <div class="large-3 columns">
+      <a href="#" class="reveal-table">Toggle Full Table</a>
+    </div>
+  </div>
+  
+  <div class="row">
+    <div class="small-12 columns">
+      <table>
+        <thead>
+          <tr>
+            <th width="30%">Client</th>
+            <th width="10%"><span>Supported</span></th>
+            <th width="60%"><span>Notes</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Apple Mail (Desktop)</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Apple Mail (iOS)</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Outlook (2000, 2002, 2003)</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Outlook (2007, 2010, 2013)</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Outlook (2011)</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Thunderbird</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Android</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Gmail (Desktop)</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Gmail (Mobile, iOS, Android)</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Outlook 2011 for Mac</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>AOL Mail</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Hotmail</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Outlook.com</td>
+            <td><span class="check">&#10004;</span></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
\ No newline at end of file

diff --git a/docs/docs.php b/docs/docs.php
index 9c53b02c343050cf8be1bfbfaf322006376c5a21..d1669c41402982bcadc3f30e8da92d76496d3c07 100644 (file)
--- a/docs/docs.php
+++ b/docs/docs.php
@@ -10,6 +10,7 @@
     #if-visibilityClasses {height: 110px;}
     #if-panels {height: 420px;}
     #if-buttons{height: 325px;}
+    #if-images{height: 250px;}
 
   @media only screen and (max-width: 632px), only screen and (min-width: 768px) and (max-width: 843px) {
     #if-basicGrid {height: 225px;}
@@ -20,6 +21,7 @@
     #if-visibilityClasses {height: 110px;}   
     #if-panels {height: 400px;}   
     #if-buttons{height: 650px;}
+    #if-images{height: 800px;}
   } 
 
 </style>
@@ -34,6 +36,7 @@
         <li><a href="#visibility-classes">Visibility Classes</a></li>
         <li><a href="#panels">Panels</a></li>
         <li><a href="#buttons">Buttons</a></li>
+        <li><a href="#images">Retina Images</a></li>
       </ul>
     </div>
   </div>
@@ -64,6 +67,10 @@
     <hr class="section">
 
     <?php require 'components/buttons.php' ?>
+
+    <hr class="section">
+
+    <?php require 'components/images.php' ?>
     
     <br>
     <br>

diff --git a/docs/examples/images.html b/docs/examples/images.html
new file mode 100644 (file)
index 0000000..d5fcc3d
--- /dev/null
+++ b/docs/examples/images.html
@@ -0,0 +1,80 @@
+<!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;
+    }
+    span { color: #FFF; display: block; font-size: 12px;  padding: 5px 10px; font-family: Courier, monospace; }
+    /*table, tr, td { vertical-align: middle; }*/
+    table.columns td, table.column td { padding: 5px 0; height: 55px;}
+    td.wrapper { padding-top: 5px 0; }
+    table.block-grid { margin: 10px 0px;}
+  </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="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>
+
+                            <p>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.</p>
+                            <p>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?</p>
+                          </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