Docs wordsmithing

diff --git a/Gruntfile.js b/Gruntfile.js
index c24bfc495b8a07749bcb849733f04341e0428b8f..42aaaecda56b498362a0d28f653a00f02ee26b32 100644 (file)
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -97,7 +97,7 @@ module.exports = function(grunt) {
     },
     watch: {
       docs: {
-        files: ['docs/docs.php', 'docs/**/*.html'],
+        files: ['docs/docs.php', 'docs/**/*.php', 'docs/**/*.html'],
         tasks: ['shell:makeStage', 'includes:docsDev', 'shell:testDocs'],
         options: {
           livereload: true,

diff --git a/docs/components/panels.php b/docs/components/panels.php
index 6d8efff401bf89e256ea9c9d611e875838830ebf..cd0eeac63d1ceec902474d1d0524928c2f968808 100644 (file)
--- a/docs/components/panels.php
+++ b/docs/components/panels.php
@@ -1,6 +1,44 @@
 <h1 id="panels" class="light">Panels</h1>
-<!-- <p class="lead">Quickly highlight important content.</p>
+<p class="lead">Quickly highlight important content.</p>
 <hr />
 
-<p>Add a class of <code>panel</code> to a <kbd>&lt;td&gt;</kbd> in order to give it a default border and background color.  Great for offsetting important content or sidebars.</p>
-<script type="text/javascript" src="https://snipt.net/embed/d6fe336d4fbc6804f6cbe7df87343283/"></script> -->
\ No newline at end of file
+<p>Add a class of <code>panel</code> to a <kbd>&lt;td&gt;</kbd> in a <code>.columns</code> table in order to give it a default border and background color.  Great for offsetting important content or for quickly prototyping a layout.</p>
+<h6>Example Panel Markup</h6>
+<?php code_example(
+'<table class="row">
+  <tr>
+    <td class="wrapper">
+
+      <table class="eight columns">
+        <tr>
+          <td>
+
+            Main content
+
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </table>
+
+    </td>
+    <td class="wrapper last">
+
+      <table class="four columns">
+        <tr>
+          <td class="panel">
+
+            Panel content
+
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </table>
+
+    </td>
+  </tr>
+</table>',
+'html') ?>
+<br>
+<h6>Sidebar Panel</h6>
+<iframe id="if-panels" src="docs/examples/panels.html"></iframe>
+<br>
\ No newline at end of file

diff --git a/docs/components/sub-grid.php b/docs/components/sub-grid.php
index e679c0184fce5381370e50df15e5fb085f44c08c..1f3b805e61b3641b5aa75a5a887077f3a82dfd68 100644 (file)
--- a/docs/components/sub-grid.php
+++ b/docs/components/sub-grid.php
@@ -1,17 +1,55 @@
 <h1 id="sub-grid" class="light">Sub-Grid</h1>
-<!-- <p class="lead">A non-stacking grid for even more versatile layouts.</p>
+<p class="lead">A non-stacking grid for even more versatile layouts.</p>
 <hr />
 
 <h4 class="normal">Grids Within Grids</h4>
-<p>While the Ink grid can't be infinitely nested like its <a href="http://foundation.zurb.com/docs/components/grid.html">Foundation counterpart</a>, Ink does provide a nestable sub-grid for when one grid just isn't enough.  By applying a <code>.sub-columns</code> class (as well as a numbered class, same as the primary grid) to a <kbd>&lt;td&gt;</kbd> tag underneath a <code>.columns</code> table, you can sub-divide the <code>.columns</code> table into sub-columns.</p>
+<p>While the Ink grid can't be nested like its <a href="http://foundation.zurb.com/docs/components/grid.html">Foundation counterpart</a>, Ink does provide a nestable sub-grid for when one grid just isn't enough.  By applying a <code>.sub-columns</code> class (as well as a numbered class, same as the primary grid) to a <kbd>&lt;td&gt;</kbd> tag underneath a <code>.columns</code> table, you can sub-divide the <code>.columns</code> table into sub-columns.</p>
 <p>The last <code>.sub-columns</code> <kbd>&lt;td&gt;</kbd> in the <code>.columns</code> <kbd>&lt;table&gt;</kbd> should be given a class of <code>last</code> in order for the gutter padding to be properly maintained.</p>
-<script type="text/javascript" src="https://snipt.net/embed/6a36cf3cecb431e26fc66e7b878822b5/"></script>
+<h6>Basic Sub-Grid Example</h6>
+<?php code_example(
+'<table class="row">
+  <tr>
+    <td class="wrapper">
+
+      <table class="eight columns">
+        <tr>
+          <td class="eight sub-columns" style="background:green;">
+
+            .eight.sub-columns
+
+          </td>
+          <td class="four sub-columns last" style="background:purple;">
+
+            .four.sub-columns
+
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </table>
+
+    </td>
+    <td class="wrapper last">
+
+      <table class="four columns">
+        <tr>
+          <td style="background:pink;">
+
+            .four columns
+
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </table>
+
+    </td>
+  </tr>
+</table>',
+'html') ?>
 <br>
-<h4 class="normal">Sub-Grid Rows</h4>
-<p>To create nested rows within a column, place multiple <code>.columns</code> tables (with the same number of columns) in the same <code>.wrapper</code> td.  These <code>.columns</code> tables can then be further divided into sub-columns by placing the a <code>.sub-columns</code> class on their child <kbd>&lt;td&gt;</kbd> elements.</p>
-<script type="text/javascript" src="https://snipt.net/embed/728696fb8f11a1f377f2ad3219e40d6e/"></script>
+<h6>Non-Collapsing Sub-Grid Columns</h6>
+<iframe id="if-subGrid" src="docs/examples/basic-sub-grid.html"></iframe>
 <br>
-<hr />
+<!-- <hr />
 <h2 class="light">Examples</h2>
 <h4 class="normal">Non-Stacking Row</h4>
 <p>Sometimes you may wish to display columns of content that you don't want to stack on small screens.  In this case, the easiest way is to place your content in a <code>.twelve.columns</code> container and use sub-columns to arrange your content.</p>

diff --git a/docs/components/visibility-classes.php b/docs/components/visibility-classes.php
index bc2a610a6ef22223a6197a5c88f0aff98817bd26..d07af8167dd431e71ad20038818abbcda0fc455d 100644 (file)
--- a/docs/components/visibility-classes.php
+++ b/docs/components/visibility-classes.php
@@ -1,10 +1,44 @@
 <h1 id="visibility-classes" class="light">Visibility Classes</h1>
-<!-- <p class="lead">Selectively show content for different screen sizes.</p>
+<p class="lead">Selectively show content for different screen sizes.</p>
 <hr />
 
 <p>By adding a visibility class to an element, you can show or hide it based on screen size.  Visibility classes can be used on any element.</p>
-<p>Note: If you're using a visibility class on an <code>&lt;img&gt;</code> tag, be sure to include it on the image's parent element as well, in order for it to work in all browsers.</p>
-<script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
+<p>Note: If you're using a visibility class on an image, be sure to apply it to the parent element, not to the image itself.</p>
+<h6>Using Visibility Classes</h6>
+<?php code_example(
+'<table class="row">
+  <tr>
+    <td class="wrapper last">
+
+      <table class="twelve columns show-for-small">
+        <tr>
+          <td class="panel">
+
+            .show-for-small
+            
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </table>
+
+      <table class="twelve columns hide-for-small">
+        <tr>
+          <td class="panel">
+
+            .hide-for-small
+
+          </td>
+          <td class="expander"></td>
+        </tr>
+      </table>
+
+    </td>
+  </tr>
+</table>',
+'html') ?>
+<br>
+<h6>Content Visibility</h6>
+<iframe id="if-visibilityClasses" src="docs/examples/visibility-classes.html"></iframe>
 <br>
 <hr />
 <h2 class="light">Breakdown</h2>
@@ -16,10 +50,4 @@
   <tr>
     <td><code>.show-for-small</code></td>
   </tr>
-  <tr>
-    <td><code>.hide-for-large</code> (same as <code>.show-for-small</code>)</td>
-  </tr>
-  <tr>
-    <td><code>.show-for-large</code> (same as <code>.hide-for-small</code>)</td>
-  </tr>
-</table> -->
\ No newline at end of file
+</table>
\ No newline at end of file

diff --git a/docs/docs.php b/docs/docs.php
index 8c2f61e80a4fca9beb9505139530f11f613b8357..46280db7a9a9a43a62065838cd0dc8323048bdac 100644 (file)
--- a/docs/docs.php
+++ b/docs/docs.php
@@ -4,12 +4,18 @@
 
     #if-basicGrid {height: 120px;}
     #if-evenColumns {height: 260px;}
+    #if-subGrid {height: 100px;}
     #if-centerClass {height: 220px;}
+    #if-visibilityClasses {height: 110px;}
+    #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-evenColumns {height: 570px;}
+    #if-subGrid {height: 140px;}
     #if-centerClass {height: 270px;}   
+    #if-visibilityClasses {height: 110px;}   
+    #if-panels {height: 150px;}   
   } 
 
 </style>

diff --git a/docs/examples/basic-sub-grid.html b/docs/examples/basic-sub-grid.html
new file mode 100644 (file)
index 0000000..32fc3ca
--- /dev/null
+++ b/docs/examples/basic-sub-grid.html
@@ -0,0 +1,74 @@
+<!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="eight columns">
+                        <tr>
+                          <td class="eight sub-columns" style="background:green;">
+                            .eight.sub-columns
+                          </td>
+                          <td class="four sub-columns last" style="background:purple;">
+                            .four.sub-columns
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper last">
+
+                      <table class="four columns">
+                        <tr>
+                          <td style="background:pink;">
+                            .four columns
+                          </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

diff --git a/docs/examples/panels.html b/docs/examples/panels.html
new file mode 100644 (file)
index 0000000..c4ac2af
--- /dev/null
+++ b/docs/examples/panels.html
@@ -0,0 +1,71 @@
+<!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="eight columns">
+                        <tr>
+                          <td>
+                            Main content
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper last">
+
+                      <table class="four columns">
+                        <tr>
+                          <td class="panel">
+                            Panel content
+                          </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

diff --git a/docs/examples/visibility-classes.html b/docs/examples/visibility-classes.html
new file mode 100644 (file)
index 0000000..c1330bc
--- /dev/null
+++ b/docs/examples/visibility-classes.html
@@ -0,0 +1,72 @@
+<!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 last">
+
+                      <table class="twelve columns show-for-small">
+                        <tr>
+                          <td class="panel">
+
+                            .show-for-small
+                            
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                      <table class="twelve columns hide-for-small">
+                        <tr>
+                          <td class="panel">
+
+                            .hide-for-small
+
+                          </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