Add component files for docs

diff --git a/docs/components/buttons.php b/docs/components/buttons.php
index 7aa91b5601fa5e73c4b729804599f8c8255d58b4..e211cfeb9c1125498b4638c9a24ff0f94a52cecd 100644 (file)
--- 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 6d6d5845566a15f3847e54845e5a9738a1dd78b6..a533b622d73b38766653b99987b686e47457d2a7 100644 (file)
--- 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 593fdb6057bb2083dfa9b8848de8a5176b972165..2097237caa32416f6e167f96751da0e80fbd0b34 100644 (file)
--- 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 cd0eeac63d1ceec902474d1d0524928c2f968808..641f4e5718de25e623c415616b4d716ccab87d3f 100644 (file)
--- 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 1f3b805e61b3641b5aa75a5a887077f3a82dfd68..969b7a05f8386d1b90e47cde7647d2210fc3255e 100644 (file)
--- 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 d07af8167dd431e71ad20038818abbcda0fc455d..c52b0cee801e239dd5d9679cacfc618e57aff0b9 100644 (file)
--- 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 46280db7a9a9a43a62065838cd0dc8323048bdac..24d712d6a21b8d5ffa51cf3ff43a0d1e9a163ab9 100644 (file)
--- 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 69dc8aaf79a381795511f67bc67c76493cabe903..45706444c86a2f692da58d64d38bcd11deb10277 100644 (file)
--- 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 -->