Updated docs

diff --git a/.DS_Store b/.DS_Store
index f6adbc027b85d0b90121de1ea815ebf9dad340c4..79729c5e1c97cc7c925e0bf48b7acc5210703034 100644 (file)
Binary files a/.DS_Store and b/.DS_Store differ

diff --git a/docs/docs.php b/docs/docs.php
index 467dcde565586ba62b43168be2b1a29a04235683..5d51e6eb48976ecccc8a736703c790d875286f41 100644 (file)
--- a/docs/docs.php
+++ b/docs/docs.php
@@ -2,12 +2,12 @@
 
   /* iframe sizes */
 
-    #if-basicGrid {height: 120px;}
+    #if-basicGrid {height: 200px;}
     #if-evenColumns {height: 260px;}
     #if-centerClass {height: 220px;}
 
   @media only screen and (max-width: 632px), only screen and (min-width: 768px) and (max-width: 843px) {
-    #if-basicGrid {height: 150px;}
+    #if-basicGrid {height: 225px;}
     #if-evenColumns {height: 570px;}
     #if-centerClass {height: 270px;}   
   } 
@@ -339,6 +339,145 @@
 </table>'
     , 'html'); ?>
     <br>
+    <br>
+    <h2 class="light">Compatibility</h2>
+    <div class="compatibility-section">
+      <div class="row">
+        <div class="large-9 columns">
+          <p>The grid works in all major email clients, with minimal issues in <strong>Thunderbird (OSX)</strong> and <strong>Sparrow (iOS)</strong>.</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>Gmail (Desktop)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td>Max-width will prevent the logo from being larger than 217px wide.</td>
+              </tr>
+              <tr>
+                <td>Gmail (Mobile)</td>
+                <td><span class="x">&#10008;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Gmail (iOS)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Gmail (Android)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Yahoo! Mail (Desktop)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Yahoo! Mail (Mobile)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Mail (iOS)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td>Lorem ipsum dolor sit amet</td>
+              </tr>
+              <tr>
+                <td>Mail (OSX)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td>Lorem ipsum dolor sit amet</td>
+              </tr>
+              <tr>
+                <td>Mail (Android)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td>Lorem ipsum dolor sit amet</td>
+              </tr>
+              <tr>
+                <td>Outlook Express</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Outlook 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 for Mac</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Hotmail (Desktop)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Hotmail (Mobile)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Thunderbird</td>
+                <td><span class="x">&#10008;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Sparrow (iOS)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Sparrow (Desktop)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Entourage (2004)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Entourage (2008)</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Windows Mail</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Live Mail</td>
+                <td><span class="check">&#10004;</span></td>
+                <td></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      
+    </div>
     
     <hr class="section">
 

diff --git a/docs/examples/basic-grid.html b/docs/examples/basic-grid.html
index b90e0f38cb37ad80bab629066edc68052fe56f37..4daf4b3651a5dfd9f956fba9eb7149c343d0772e 100644 (file)
--- a/docs/examples/basic-grid.html
+++ b/docs/examples/basic-grid.html
@@ -489,7 +489,10 @@ a.rounded td {
   -moz-border-radius: 500px;
   border-radius: 500px;
 }
-
+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: 0; }
+td.wrapper { padding-top: 0; }
 /**********************************************
 * Outlook First                               *
 **********************************************/
@@ -585,18 +588,23 @@ body.outlook img {
 
           <!-- EXAMPLE CODE -->
 
-          <table class="container" style="background:purple;">
+          <table class="container" style="background:#002B35;">
             <tr>
-              <td style="padding-top: 10px; padding-bottom: 10px;">
-
-                <table class="row" style="background:green;">
+              <td><span>table.container</span></td>
+            </tr>
+            <tr>
+              <td>
+                <table class="row" style="background:#28A9C5;">
+                  <tr>
+                    <td><span>table.row</span></td>
+                  </tr>
                   <tr>
                     <td class="wrapper">
 
-                      <table class="eight columns" style="background:pink;">
+                      <table class="eight columns" style="background:#82CCE5;">
                         <tr>
                           <td>
-                            Eight Columns
+                            <span>.eight.columns</span>
                           </td>
                           <td class="expander"></td>
                         </tr>
@@ -605,21 +613,27 @@ body.outlook img {
                     </td>
                     <td class="wrapper last">
 
-                      <table class="four columns" style="background:pink;">
+                      <table class="four columns" style="background:#82CCE5;">
                         <tr>
                           <td>
-                            Four Columns
+                            <span>.four.columns</span>
                           </td>
                           <td class="expander"></td>
                         </tr>
                       </table>
-
+                      
                     </td>
                   </tr>
+                  <tr>
+                    <td><span>&nbsp;</span></td>
+                  </tr>
                 </table>
 
               </td>
             </tr>
+            <tr>
+              <td><span>&nbsp;</span></td>
+            </tr>
           </table>
 
           <!-- END EXAMPLE CODE -->

diff --git a/docs/examples/center-class.html b/docs/examples/center-class.html
index 0c7b4cf947ac0bf84d425a44213c45733efc9871..e034ee9c8e4f5b14f0e31137a831780e09cdea36 100644 (file)
--- a/docs/examples/center-class.html
+++ b/docs/examples/center-class.html
@@ -610,7 +610,7 @@ body.outlook img {
                           <td class="center panel">
 
                             <!-- Centered image -->
-                            <img class="center" src="http://placehold.it/125x125&text=Centered%20Image">
+                            <img class="center" src="http://placehold.it/125x125&text=Image">
                           
                           </td>
                           <td class="expander"></td>

diff --git a/docs/examples/even-columns.html b/docs/examples/even-columns.html
index d4c8ca22a882dc7284f7736db016504576430f26..31f6acda8bb4d7d94cabec47612b2c44b6b8edb6 100644 (file)
--- a/docs/examples/even-columns.html
+++ b/docs/examples/even-columns.html
@@ -490,6 +490,7 @@ a.rounded td {
   border-radius: 500px;
 }
 
+span { font-family: Courier, monospace; font-size: 12px; display: block; }
 /**********************************************
 * Outlook First                               *
 **********************************************/
@@ -596,7 +597,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          twelve.columns
+                          <span>.twelve.columns</span>
                         
                         </td>
                         <td class="expander"></td>
@@ -615,7 +616,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .six.columns
+                          <span>.six.columns</span>
                         
                         </td>
                         <td class="expander"></td>
@@ -629,7 +630,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .six.columns
+                          <span>.six.columns</span>
 
                         </td>
                         <td class="expander"></td>
@@ -648,7 +649,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .four.columns
+                          <span>.four.columns</span>
                         
                         </td>
                         <td class="expander"></td>
@@ -662,7 +663,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .four.columns
+                          <span>.four.columns</span>
                         
                         </td>
                         <td class="expander"></td>
@@ -676,7 +677,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .four.columns
+                          <span>.four.columns</span>
 
                         </td>
                         <td class="expander"></td>
@@ -695,7 +696,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .three.columns
+                          <span>.three.columns</span>
                         
                         </td>
                         <td class="expander"></td>
@@ -709,7 +710,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .three.columns
+                          <span>.three.columns</span>
                         
                         </td>
                         <td class="expander"></td>
@@ -723,7 +724,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .three.columns
+                          <span>.three.columns</span>
                         
                         </td>
                         <td class="expander"></td>
@@ -737,7 +738,7 @@ body.outlook img {
                       <tr>
                         <td class="panel">
 
-                          .three.columns
+                          <span>.three.columns</span>
 
                         </td>
                         <td class="expander"></td>

diff --git a/includes/_footer.php b/includes/_footer.php
index 9344745222757c89834e6aca38b0fa4e92a96101..86b3d158412cea9e233996beee967f816fa0db1a 100644 (file)
--- a/includes/_footer.php
+++ b/includes/_footer.php
@@ -115,7 +115,7 @@
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
        <script src="javascripts/foundation/foundation.topbar.js"></script>
   <script src="javascripts/foundation/jquery.offcanvas.js"></script>
-       
+  <script src="javascripts/app.js"></script>   
   
   <script>
     $(document).foundation();

diff --git a/javascripts/app.js b/javascripts/app.js
new file mode 100644 (file)
index 0000000..7fd95e6
--- /dev/null
+++ b/javascripts/app.js
@@ -0,0 +1,10 @@
+$(document).ready(function(){
+  $('a.reveal-table').click(function(e){
+    e.preventDefault();
+    var options = $(this).parent('div').parent('div').parent('div');
+    if(options.hasClass("active")) {
+      return options.removeClass('active');
+    }
+    return options.addClass('active');
+  });
+});
\ No newline at end of file

diff --git a/sass/app.scss b/sass/app.scss
index 64e859691742ea250e273f34b379654553f7ba3f..713d6d7435a3ea94a263feb69c4803e4be3cbc8f 100644 (file)
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -536,13 +536,18 @@ table {
   .check { color: green; }
   .x { color: red; }
 }
+.compatibility-section { background: #f8f8f8; border: 1px solid #ddd; padding: 15px; 
+  p { margin-bottom: 0; }
+  a { font-size: emCalc(14px); display: block; text-align: right; line-height: 22px; }
+  table { display: none; margin: 20px 0 0; }
+  &.active table { display: block; }
+}
 
 /* magellan */
-[data-magellan-expedition] { background: transparent; left: auto; }
+[data-magellan-expedition] { background: transparent; left: auto; max-width: 200px; min-width: 0; }
 ul.sub-nav {
   li {
     a { display: block; font-size: emCalc(14px); padding: 5px 0; color: #333; }
     &.active a { color: #CC7691; font-weight: bold; }
-  }
-  
+  } 
 }
\ No newline at end of file

diff --git a/stylesheets/app.css b/stylesheets/app.css
index bcb688268ed2310020c7b8fdfe652541b558c76b..d8b220c4bcdd72f1f8ade6531ec021043241d0b9 100644 (file)
--- a/stylesheets/app.css
+++ b/stylesheets/app.css
@@ -12606,21 +12606,50 @@ table .x {
   color: red;
 }
 
-/* magellan */
+/* line 539, ../sass/app.scss */
+.compatibility-section {
+  background: #f8f8f8;
+  border: 1px solid #ddd;
+  padding: 15px;
+}
+/* line 540, ../sass/app.scss */
+.compatibility-section p {
+  margin-bottom: 0;
+}
 /* line 541, ../sass/app.scss */
+.compatibility-section a {
+  font-size: 0.875em;
+  display: block;
+  text-align: right;
+  line-height: 22px;
+}
+/* line 542, ../sass/app.scss */
+.compatibility-section table {
+  display: none;
+  margin: 20px 0 0;
+}
+/* line 543, ../sass/app.scss */
+.compatibility-section.active table {
+  display: block;
+}
+
+/* magellan */
+/* line 547, ../sass/app.scss */
 [data-magellan-expedition] {
   background: transparent;
   left: auto;
+  max-width: 200px;
+  min-width: 0;
 }
 
-/* line 544, ../sass/app.scss */
+/* line 550, ../sass/app.scss */
 ul.sub-nav li a {
   display: block;
   font-size: 0.875em;
   padding: 5px 0;
   color: #333;
 }
-/* line 545, ../sass/app.scss */
+/* line 551, ../sass/app.scss */
 ul.sub-nav li.active a {
   color: #CC7691;
   font-weight: bold;