From: Eric Morris <eric@zurb.com>
Date: Wed, 6 Nov 2013 20:20:15 +0000 (-0800)
Subject: Add component files for docs
X-Git-Tag: v1.0.0~22
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e579dce0c8809120a1adae446d4edecba40bb4ce;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Add component files for docs
---

diff --git a/docs/components/buttons.php b/docs/components/buttons.php
index 7aa91b56..e211cfeb 100644
--- a/docs/components/buttons.php
+++ b/docs/components/buttons.php
@@ -1,4 +1,4 @@
-<h1 id="buttons" class="light">Buttons</h1>
+<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>
diff --git a/docs/components/getting-started.php b/docs/components/getting-started.php
index 6d6d5845..a533b622 100644
--- a/docs/components/getting-started.php
+++ b/docs/components/getting-started.php
@@ -1,4 +1,4 @@
-<h1 id="start" class="light">Getting Started</h1>
+<h1 id="start" data-magellan-destination="start" class="light">Getting Started</h1>
     <p class="lead">Dive into creating your responsive email.</p>
     <hr>
     <h2 class="light">The Boilerplate</h2>
diff --git a/docs/components/grid.php b/docs/components/grid.php
index 593fdb60..2097237c 100644
--- a/docs/components/grid.php
+++ b/docs/components/grid.php
@@ -1,4 +1,4 @@
-<h1 id="grid" class="light">Grid</h1>
+<h1 id="grid" data-magellan-destination="grid" class="light">Grid</h1>
     <p class="lead">Create powerful multi-device layouts quickly and easily.</p>
 
     <hr>
diff --git a/docs/components/panels.php b/docs/components/panels.php
index cd0eeac6..641f4e57 100644
--- a/docs/components/panels.php
+++ b/docs/components/panels.php
@@ -1,4 +1,4 @@
-<h1 id="panels" class="light">Panels</h1>
+<h1 id="panels" data-magellan-destination="panels" class="light">Panels</h1>
 <p class="lead">Quickly highlight important content.</p>
 <hr />
 
diff --git a/docs/components/sub-grid.php b/docs/components/sub-grid.php
index 1f3b805e..969b7a05 100644
--- a/docs/components/sub-grid.php
+++ b/docs/components/sub-grid.php
@@ -1,4 +1,4 @@
-<h1 id="sub-grid" class="light">Sub-Grid</h1>
+<h1 id="sub-grid" data-magellan-destination="sub-grid" class="light">Sub-Grid</h1>
 <p class="lead">A non-stacking grid for even more versatile layouts.</p>
 <hr />
 
diff --git a/docs/components/visibility-classes.php b/docs/components/visibility-classes.php
index d07af816..c52b0cee 100644
--- a/docs/components/visibility-classes.php
+++ b/docs/components/visibility-classes.php
@@ -1,4 +1,4 @@
-<h1 id="visibility-classes" class="light">Visibility Classes</h1>
+<h1 id="visibility-classes" data-magellan-destination="visibility-classes" class="light">Visibility Classes</h1>
 <p class="lead">Selectively show content for different screen sizes.</p>
 <hr />
 
diff --git a/docs/docs.php b/docs/docs.php
index 46280db7..24d712d6 100644
--- a/docs/docs.php
+++ b/docs/docs.php
@@ -2,7 +2,7 @@
 
   /* iframe sizes */
 
-    #if-basicGrid {height: 120px;}
+    #if-basicGrid {height: 200px;}
     #if-evenColumns {height: 260px;}
     #if-subGrid {height: 100px;}
     #if-centerClass {height: 220px;}
@@ -10,7 +10,7 @@
     #if-panels {height: 110px;}
 
   @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-subGrid {height: 140px;}
     #if-centerClass {height: 270px;}   
@@ -21,15 +21,17 @@
 </style>
 <div class="row docs">
   <div class="large-3 columns">
-    <ul class="doc-nav hide-for-small">
-      <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>
-      <li><a href="#compatibility">Compatibility</a></li>
-    </ul>
+    <div data-magellan-expedition="fixed">
+      <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>
+      </ul>
+    </div>
   </div>
   <div class="large-9 columns">
     
diff --git a/docs/examples/basic-grid.html b/docs/examples/basic-grid.html
index 69dc8aaf..45706444 100644
--- a/docs/examples/basic-grid.html
+++ b/docs/examples/basic-grid.html
@@ -13,6 +13,10 @@
       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: 0; }
+    td.wrapper { padding-top: 0; }
   </style>
 </head>
 <body>
@@ -24,18 +28,23 @@
 
           <!-- 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>
@@ -44,21 +53,27 @@
                     </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 -->