[from now] 2014/10/15 18:17:30

diff --git a/app/assets/javascripts/groundworkdocs.js.coffee b/app/assets/javascripts/groundworkdocs.js.coffee
new file mode 100644
index 0000000..2f683be
--- /dev/null
+++ b/app/assets/javascripts/groundworkdocs.js.coffee
@@ -0,0 +1,6 @@
+# GroundworkCSS 2 Documentation
+
+#= require 'groundworkcss/libs/modernizr-2.6.2.min'
+#= require 'groundworkcss/libs/jquery-1.10.2.min'
+#= require 'groundworkcss/all'
+#= require 'groundworkcss/demo/jquery.snippet.min'
diff --git a/app/assets/stylesheets/groundworkdocs.css.scss b/app/assets/stylesheets/groundworkdocs.css.scss
new file mode 100644
index 0000000..8bd00ec
--- /dev/null
+++ b/app/assets/stylesheets/groundworkdocs.css.scss
@@ -0,0 +1,10 @@
+// GroundworkCSS 2 Documentation
+
+$root_path:      "./";
+$images_path:    asset-path("images/");
+$fonts_path:     "groundworkcss/";
+$boxsizing_path: asset-path("groundworkcss/libs/boxsizing.htc");
+$PIE_path:       asset-path("groundworkcss/libs/PIE.htc");
+@import 'groundworkcss/groundwork';
+@import 'groundworkcss/demo/jquery.snippet';
+@import 'groundworkcss/demo/groundworkdocs';
diff --git a/app/controllers/groundworkdocs_controller.rb b/app/controllers/groundworkdocs_controller.rb
new file mode 100644
index 0000000..3921231
--- /dev/null
+++ b/app/controllers/groundworkdocs_controller.rb
@@ -0,0 +1,63 @@
+class GroundworkdocsController < ApplicationController
+layout 'groundworkdocs'
+
+  def animations
+  end
+
+  def boxes
+  end
+
+  def breakpoints
+  end
+
+  def buttons
+  end
+
+  def forms
+  end
+
+  def grid
+  end
+
+  def helpers
+  end
+
+  def home
+  end
+
+  def icons
+  end
+
+  def layout_a
+  end
+
+  def layout_b
+  end
+
+  def layout_c
+  end
+
+  def media_queries
+  end
+
+  def messages
+  end
+
+  def navigation
+  end
+
+  def placeholder_text
+  end
+
+  def responsive_text
+  end
+
+  def tables
+  end
+
+  def tabs
+  end
+
+  def typography
+  end
+end
diff --git a/app/helpers/groundworkdocs_helper.rb b/app/helpers/groundworkdocs_helper.rb
new file mode 100644
index 0000000..1f1927f
--- /dev/null
+++ b/app/helpers/groundworkdocs_helper.rb
@@ -0,0 +1,2 @@
+module GroundworkdocsHelper
+end
diff --git a/app/views/groundworkdocs/animations.html.erb b/app/views/groundworkdocs/animations.html.erb
new file mode 100644
index 0000000..a1ca266
--- /dev/null
+++ b/app/views/groundworkdocs/animations.html.erb
@@ -0,0 +1,156 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Animations</h1>
+            <p class="quicksand">A collection of pure CSS3 animations, mostly from <a href="http://daneden.me/animate/" target="_blank">Animate.css</a> by <a href="http://twitter.com/_dte" target="_blank">Dan Eden</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 14 of 14</p>
+            <p><a href="placeholder_text.html" rel="prev" class="blue button">Back</a> <a href="home.html" rel="next" class="green button">Return Home</a></p>
+          </div>
+        </div>
+        <hr><br>
+      </div>
+    </div>
+    <h4 style="width:20em;margin-left:-10em;text-align:center;z-index:1;" class="fixed center">
+      <button id="animateTest" class="large asphalt bounceInLeft animated">I do awesome things.</button>
+    </h4><br><br><br><br>
+    <div class="container">
+      <div class="padded">
+        <hr><br>
+        <div class="row">
+          <div class="one half padded">
+            <h4>Attention seekers</h4>
+            <button data-test="flash" class="gap-bottom">flash</button>
+            <button data-test="bounce" class="gap-bottom">bounce</button>
+            <button data-test="shake" class="gap-bottom">shake</button>
+            <button data-test="tada" class="gap-bottom">tada</button>
+            <button data-test="swing" class="gap-bottom">swing</button>
+            <button data-test="wobble" class="gap-bottom">wobble</button>
+            <button data-test="pulse" class="gap-bottom">pulse</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Flippers</h4>
+            <button data-test="flip" class="gap-bottom">flip</button>
+            <button data-test="flipInX" class="gap-bottom">flipInX</button>
+            <button data-test="flipOutX" class="gap-bottom">flipOutX</button>
+            <button data-test="flipInY" class="gap-bottom">flipInY</button>
+            <button data-test="flipOutY" class="gap-bottom">flipOutY</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Fading entrances</h4>
+            <button data-test="fadeIn" class="gap-bottom">fadeIn</button>
+            <button data-test="fadeInUp" class="gap-bottom">fadeInUp</button>
+            <button data-test="fadeInDown" class="gap-bottom">fadeInDown</button>
+            <button data-test="fadeInLeft" class="gap-bottom">fadeInLeft</button>
+            <button data-test="fadeInRight" class="gap-bottom">fadeInRight</button>
+            <button data-test="fadeInUpBig" class="gap-bottom">fadeInUpBig</button>
+            <button data-test="fadeInDownBig" class="gap-bottom">fadeInDownBig</button>
+            <button data-test="fadeInLeftBig" class="gap-bottom">fadeInLeftBig</button>
+            <button data-test="fadeInRightBig" class="gap-bottom">fadeInRightBig</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Fading exits</h4>
+            <button data-test="fadeOut" class="gap-bottom">fadeOut</button>
+            <button data-test="fadeOutUp" class="gap-bottom">fadeOutUp</button>
+            <button data-test="fadeOutDown" class="gap-bottom">fadeOutDown</button>
+            <button data-test="fadeOutLeft" class="gap-bottom">fadeOutLeft</button>
+            <button data-test="fadeOutRight" class="gap-bottom">fadeOutRight</button>
+            <button data-test="fadeOutUpBig" class="gap-bottom">fadeOutUpBig</button>
+            <button data-test="fadeOutDownBig" class="gap-bottom">fadeOutDownBig</button>
+            <button data-test="fadeOutLeftBig" class="gap-bottom">fadeOutLeftBig</button>
+            <button data-test="fadeOutRightBig" class="gap-bottom">fadeOutRightBig</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Bouncing entrances</h4>
+            <button data-test="bounceIn" class="gap-bottom">bounceIn</button>
+            <button data-test="bounceInDown" class="gap-bottom">bounceInDown</button>
+            <button data-test="bounceInUp" class="gap-bottom">bounceInUp</button>
+            <button data-test="bounceInLeft" class="gap-bottom">bounceInLeft</button>
+            <button data-test="bounceInRight" class="gap-bottom">bounceInRight</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Bouncing exits</h4>
+            <button data-test="bounceOut" class="gap-bottom">bounceOut</button>
+            <button data-test="bounceOutDown" class="gap-bottom">bounceOutDown</button>
+            <button data-test="bounceOutUp" class="gap-bottom">bounceOutUp</button>
+            <button data-test="bounceOutLeft" class="gap-bottom">bounceOutLeft</button>
+            <button data-test="bounceOutRight" class="gap-bottom">bounceOutRight</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Rotating entrances</h4>
+            <button data-test="rotateIn" class="gap-bottom">rotateIn</button>
+            <button data-test="rotateInDownLeft" class="gap-bottom">rotateInDownLeft</button>
+            <button data-test="rotateInDownRight" class="gap-bottom">rotateInDownRight</button>
+            <button data-test="rotateInUpLeft" class="gap-bottom">rotateInUpLeft</button>
+            <button data-test="rotateInUpRight" class="gap-bottom">rotateInUpRight</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Rotating exits</h4>
+            <button data-test="rotateOut" class="gap-bottom">rotateOut</button>
+            <button data-test="rotateOutDownLeft" class="gap-bottom">rotateOutDownLeft</button>
+            <button data-test="rotateOutDownRight" class="gap-bottom">rotateOutDownRight</button>
+            <button data-test="rotateOutUpLeft" class="gap-bottom">rotateOutUpLeft</button>
+            <button data-test="rotateOutUpRight" class="gap-bottom">rotateOutUpRight</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Lightspeed</h4>
+            <button data-test="lightSpeedIn" class="gap-bottom">lightSpeedIn</button>
+            <button data-test="lightSpeedOut" class="gap-bottom">lightSpeedOut</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Specials</h4>
+            <button data-test="hinge" class="gap-bottom">hinge</button>
+            <button data-test="rollIn" class="gap-bottom">rollIn</button>
+            <button data-test="rollOut" class="gap-bottom">rollOut</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one third padded">
+            <h4 class="gap-top">Spin</h4>
+            <button data-test="spin" data-timing="12000" class="gap-bottom">spin (continuous)</button>
+            <button data-test="spin-once" data-timing="2000" class="gap-bottom">spin-once</button>
+            <button data-test="spin-twice" data-timing="4000" class="gap-bottom">spin-twice</button>
+            <button data-test="spin-thrice" data-timing="6000" class="gap-bottom">spin-thrice</button>
+          </div>
+          <div class="one third padded">
+            <h4 class="gap-top">Spin Fast</h4>
+            <button data-test="spin-fast" data-timing="6000" class="gap-bottom">spin-fast (continuous)</button>
+            <button data-test="spin-fast-once" data-timing="1000" class="gap-bottom">spin-fast-once</button>
+            <button data-test="spin-fast-twice" data-timing="2000" class="gap-bottom">spin-fast-twice</button>
+            <button data-test="spin-fast-thrice" data-timing="3000" class="gap-bottom">spin-fast-thrice</button>
+          </div>
+          <div class="one third padded">
+            <h4 class="gap-top">Spin Slow</h4>
+            <button data-test="spin-slow" data-timing="30000" class="gap-bottom">spin-slow (continuous)</button>
+            <button data-test="spin-slow-once" data-timing="5000" class="gap-bottom">spin-slow-once</button>
+            <button data-test="spin-slow-twice" data-timing="10000" class="gap-bottom">spin-slow-twice</button>
+            <button data-test="spin-slow-thrice" data-timing="15000" class="gap-bottom">spin-slow-thrice</button>
+          </div>
+        </div>
+        <script type="text/javascript">
+          $(document).ready(function() {
+            var resetTest;
+            resetTest = function() {
+              return $('#animateTest').removeClass().addClass('large asphalt animated').text('I do awesome things.');
+            };
+            return $('body').on('click', '[data-test]', function(e) {
+              var _this = this;
+              resetTest();
+              clearTimeout(window.reset);
+              $('#animateTest').removeClass().addClass('large asphalt animated ' + $(this).attr('data-test')).text('I ' + $(this).attr('data-test') + '.');
+              return window.reset = setTimeout(function() {
+                return resetTest();
+              }, $(this).attr('data-timing') || 1300);
+            });
+          });
+        </script>
+      </div>
diff --git a/app/views/groundworkdocs/boxes.html.erb b/app/views/groundworkdocs/boxes.html.erb
new file mode 100644
index 0000000..0fe1e9f
--- /dev/null
+++ b/app/views/groundworkdocs/boxes.html.erb
@@ -0,0 +1,131 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Boxes</h1>
+            <p class="quicksand">Easily wrap content in a box</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 6 of 14</p>
+            <p><a href="buttons.html" class="blue button" rel="prev">Back</a> <a href="messages.html" class="green button" rel="next">Next: Message Boxes</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="row">
+            <div class="one whole bounceInLeft animated">
+              <div class="pad-top pad-left pad-right">
+                <h4>Boxes</h4>
+                <div class="row">
+                  <div class="one half small-tablet pad-right no-pad-mobile">
+                    <p class="box">This is a box paragraph.</p>
+                    <pre data-lang="html">&lt;p class=&quot;box&quot;&gt;This is a box paragraph.&lt;/p&gt;</pre><br>
+                    <h2 class="box">This is a box heading 2.</h2>
+                    <pre data-lang="html">&lt;h2 class=&quot;box&quot;&gt;This is a box heading 2.&lt;/h2&gt;</pre><br>
+                    <h4 class="box">This is a box heading 4.</h4>
+                    <pre data-lang="html">&lt;h4 class=&quot;box&quot;&gt;This is a box heading 4.&lt;/h4&gt;</pre><br>
+                    <h6 class="box">This is a box heading 6.</h6>
+                    <pre data-lang="html">&lt;h6 class=&quot;box&quot;&gt;This is a box heading 6.&lt;/h6&gt;</pre>
+                  </div>
+                  <div class="one half small-tablet pad-left no-pad-mobile">
+                    <div class="box">
+                      <h3>Another Box</h3>
+                      <p>Boxes can contain other elements, such as:</p>
+                      <div class="row gap-bottom">
+                        <div class="three fourths small-tablet pad-right no-pad-mobile">
+                          <input placeholder="Input fields">
+                        </div>
+                        <div class="one fourth small-tablet">
+                          <button class="block asphalt">Buttons</button>
+                        </div>
+                      </div>
+                      <table class="asphalt">
+                        <thead>
+                          <tr>
+                            <th colspan="4">Tables</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <td>Cell 1</td>
+                            <td>Cell 2</td>
+                            <td>Cell 3</td>
+                            <td>Cell 4</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      <p class="gap-top">And <em>much</em> more.</p>
+                    </div>
+                    <pre data-lang="html" class="gap-top">&lt;div class=&quot;box&quot;&gt;
+  &lt;h3&gt;Another Box&lt;/h3&gt;
+  &lt;p&gt;Boxes can contain other elements, such as:&lt;/p&gt;
+  &lt;div class=&quot;row gap-bottom&quot;&gt;
+    &lt;div class=&quot;three fourths small-tablet pad-right no-pad-mobile&quot;&gt;
+      &lt;input placeholder=&quot;Input fields&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;one fourth small-tablet&quot;&gt;
+      &lt;button class=&quot;block asphalt&quot;&gt;Buttons&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;table class=&quot;asphalt&quot;&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;
+        &lt;th colspan=&quot;4&quot;&gt;Tables&lt;/th&gt;
+      &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;
+        &lt;td&gt;Cell 1&lt;/td&gt;
+        &lt;td&gt;Cell 2&lt;/td&gt;
+        &lt;td&gt;Cell 3&lt;/td&gt;
+        &lt;td&gt;Cell 4&lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
+  &lt;p&gt;And &lt;em&gt;much&lt;/em&gt; more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+                  </div>
+                </div><br>
+                <div class="row">
+                  <div class="one half small-tablet pad-right no-pad-mobile"></div>
+                  <div class="one half small-tablet pad-left no-pad-mobile"></div>
+                </div>
+              </div>
+            </div>
+          </div><br>
+          <div class="row">
+            <div class="one half padded bounceInUp animated">
+              <h4>States</h4>
+              <p class="info box">This is an info box.</p>
+              <p class="success box">This is a success box.</p>
+              <p class="question box">This is a question box.</p>
+              <p class="alert box">This is an alert box.</p>
+              <p class="warning box">This is a warning box.</p>
+              <p class="error box">This is an error box.</p><br>
+              <div class="row">
+                <div class="one small-tablet half pad-right no-pad-mobile">
+                  <h4>Square</h4>
+                  <p class="box square">This is a square box.</p>
+                </div>
+                <div class="one small-tablet half pad-left no-pad-mobile">
+                  <h4>Round</h4>
+                  <p class="box round align-center">This is a round box.</p>
+                </div>
+              </div>
+            </div>
+            <div class="one half padded bounceInDown animated">
+              <h4>Colors</h4>
+              <p class="yellow box">This is a yellow box.</p>
+              <p class="orange box">This is a orange box.</p>
+              <p class="red box">This is a red box.</p>
+              <p class="pink box">This is a pink box.</p>
+              <p class="purple box">This is a purple box.</p>
+              <p class="asphalt box">This is a asphalt box.</p>
+              <p class="blue box">This is a blue box.</p>
+              <p class="turquoise box">This is a turquoise box.</p>
+              <p class="green box">This is a green box.</p>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/breakpoints.html.erb b/app/views/groundworkdocs/breakpoints.html.erb
new file mode 100644
index 0000000..e0b4619
--- /dev/null
+++ b/app/views/groundworkdocs/breakpoints.html.erb
@@ -0,0 +1,143 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Targeted Breakpoints</h1>
+            <p class="quicksand">Logical <a href="media_queries.html">media queries</a> targeting browsers that meet the declared conditions</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Documentation: Breakpoints</p>
+            <p><a href="media_queries.html" class="green button">Also See: Media Queries <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Logically Named Breakpoints</h4>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Small Mobiles</dt>
+                  <dd>Designed to target mobile devices with viewport sizes smaller than an iPhone.</dd>
+                </dl>
+                <pre data-lang="css">$small-mobile: &quot;(max-width: 319px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>iPhone (up to 4S)</dt>
+                  <dd>Designed to target mobile devices with viewport sizes up to the iPhone 4/4S.</dd>
+                </dl>
+                <pre data-lang="css">$iphone: &quot;(min-device-width: 320px) and (max-device-width: 480px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>iPhone (up to 5)</dt>
+                  <dd>Designed to target mobile devies with viewport sizes up to the iPhones 5.</dd>
+                </dl>
+                <pre data-lang="css">$iphone5: &quot;(min-device-width: 320px) and (max-device-width: 568px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Mobile</dt>
+                  <dd>Designed to target mobile devices with viewport sizes similar to the larger Androids.</dd>
+                </dl>
+                <pre data-lang="css">$mobile: &quot;(max-width: 480px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Not Mobile</dt>
+                  <dd>Designed to target devices with viewport sizes greater than those within the <em>"mobile"</em> category.</dd>
+                </dl>
+                <pre data-lang="css">$not-mobile: &quot;(min-width: 481px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Small Tablet</dt>
+                  <dd>Designed to target devices with viewport sizes smaller than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$small-tablet: &quot;(max-width: 767px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Tablet</dt>
+                  <dd>Designed to target devices with viewport sizes similar to or greater than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$tablet: &quot;(min-width: 768px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>iPad (including iPad Mini)</dt>
+                  <dd>Designed to target devices with viewport sizes similar to an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$ipad: &quot;(min-width: 768px) and (max-width:1024px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>iPad (Retina only)</dt>
+                  <dd>Designed to target devices with viewport sizes similar to an iPad, and with retina display.</dd>
+                </dl>
+                <pre data-lang="css">$retina-ipad: &quot;(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Not Desktop</dt>
+                  <dd>Designed to target devices with viewport sizes up to, but not greater than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$not-desktop: &quot;(max-width: 1024px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Desktop</dt>
+                  <dd>Designed to target devices with viewport sizes greater than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$desktop: &quot;(min-width: 1025px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Retina</dt>
+                  <dd>Designed to target devices of any size with retina display.</dd>
+                </dl>
+                <pre data-lang="css">$retina: &quot;(-webkit-min-device-pixel-ratio: 1.5)&quot;;</pre>
+              </div>
+            </div><br>
+            <hr><br>
+            <h4>Example Usage (SCSS)</h4>
+            <pre data-lang="css">.custom_thing {
+  font-size: 1em;
+  color: green;
+  @media #{$mobile} {
+    font-size: 2em;
+    color: blue;
+  }
+}</pre><br>
+            <h4>Result (CSS)</h4>
+            <pre data-lang="css">.custom_thing {
+  font-size: 1em;
+  color: green;
+}
+@media (max-width: 480px) {
+  .custom_thing {
+    font-size: 2em;
+    color: blue;
+  }
+}</pre><br>
+            <hr><br>
+          </div>
+          <div class="bounceInUp animated">
+            <h4>Media Queries</h4>
+            <p><a href="media_queries.html">Media queries</a> using these named breakpoints are what make Groundwork responsive &mdash; along with some help from Javascript when it's needed for additional functionality.</p>
+            <p><a href="media_queries.html" class="green button">Read More <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/buttons.html.erb b/app/views/groundworkdocs/buttons.html.erb
new file mode 100644
index 0000000..d92c79a
--- /dev/null
+++ b/app/views/groundworkdocs/buttons.html.erb
@@ -0,0 +1,369 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Buttons</h1>
+            <p class="quicksand">Easy-to-customize button styles</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 5 of 14</p>
+            <p><a href="navigation.html" rel="prev" class="blue button">Back</a> <a href="boxes.html" rel="next" class="green button">Next: Boxes</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInRight animated">
+            <h4>Buttons</h4>
+            <div class="row">
+              <div class="one small-tablet third padded">
+                <h4>Sizes</h4>
+                <p>
+                  <button class="small">Small Button</button>
+                </p>
+                <p>
+                  <button>Medium Button</button>
+                </p>
+                <p>
+                  <button class="large">Large Button</button>
+                </p>
+              </div>
+              <div class="one small-tablet third padded">
+                <h4>Types</h4>
+                <p>
+                  <button>Normal Button</button>
+                </p>
+                <p>
+                  <button class="info">Info Button</button>
+                </p>
+                <p>
+                  <button class="success">Success Button</button>
+                </p>
+                <p>
+                  <button class="alert">Alert Button</button>
+                </p>
+                <p>
+                  <button class="question">Question Button</button>
+                </p>
+                <p>
+                  <button class="warning">Warning Button</button>
+                </p>
+                <p>
+                  <button class="error">Error Button</button>
+                </p>
+              </div>
+              <div class="one small-tablet third padded">
+                <h4>Styles</h4>
+                <p>
+                  <button>Normal Button</button>
+                </p>
+                <p>
+                  <button class="square">Square Button</button>
+                </p>
+                <p>
+                  <button class="round">Round Button</button>
+                </p>
+                <p>
+                  <button class="block">Block Button</button>
+                </p>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>States</h4>
+            <div class="row">
+              <div class="one small-tablet third padded">
+                <h4>Normal</h4>
+                <p>
+                  <button>Button</button>
+                </p>
+                <p>
+                  <button class="info">Info</button>
+                </p>
+                <p>
+                  <button class="success">Success</button>
+                </p>
+                <p>
+                  <button class="alert">Alert</button>
+                </p>
+                <p>
+                  <button class="question">Question</button>
+                </p>
+                <p>
+                  <button class="warning">Warning</button>
+                </p>
+                <p>
+                  <button class="error">Error</button>
+                </p>
+              </div>
+              <div class="one small-tablet third padded">
+                <h4>Active</h4>
+                <p>
+                  <button aria-selected="true">Active Button</button>
+                </p>
+                <p>
+                  <button aria-selected="true" class="info">Active Info</button>
+                </p>
+                <p>
+                  <button aria-selected="true" class="success">Active Success</button>
+                </p>
+                <p>
+                  <button aria-selected="true" class="alert">Active Alert</button>
+                </p>
+                <p>
+                  <button aria-selected="true" class="question">Active Question</button>
+                </p>
+                <p>
+                  <button aria-selected="true" class="warning">Active Warning</button>
+                </p>
+                <p>
+                  <button aria-selected="true" class="error">Active Error</button>
+                </p>
+              </div>
+              <div class="one small-tablet third padded">
+                <h4>Disabled</h4>
+                <p>
+                  <button disabled="disabled" aria-disabled="true">Disabled Button</button>
+                </p>
+                <p>
+                  <button disabled="disabled" aria-disabled="true" class="info">Disabled Info</button>
+                </p>
+                <p>
+                  <button disabled="disabled" aria-disabled="true" class="success">Disabled Success</button>
+                </p>
+                <p>
+                  <button disabled="disabled" aria-disabled="true" class="alert">Disabled Alert</button>
+                </p>
+                <p>
+                  <button disabled="disabled" aria-disabled="true" class="question">Disabled Question</button>
+                </p>
+                <p>
+                  <button disabled="disabled" aria-disabled="true" class="warning">Disabled Warning</button>
+                </p>
+                <p>
+                  <button disabled="disabled" aria-disabled="true" class="error">Disabled Error</button>
+                </p>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Colors</h4>
+            <div class="row">
+              <div class="one whole">
+                <button class="yellow gap-right gap-bottom">Yellow Button</button>
+                <button class="orange gap-right gap-bottom">Orange Button</button>
+                <button class="red gap-right gap-bottom">Red Button</button>
+                <button class="pink gap-right gap-bottom">Pink Button</button>
+                <button class="purple gap-right gap-bottom">Purple Button</button>
+                <button class="asphalt gap-right gap-bottom">Asphalt Button</button>
+                <button class="blue gap-right gap-bottom">Blue Button</button>
+                <button class="turquoise gap-right gap-bottom">Turquoise Button</button>
+                <button class="green gap-right gap-bottom">Green Button</button>
+                <button class="charcoal gap-right gap-bottom">Charcoal Button</button>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Semantic Link Types</h4>
+            <div class="row">
+              <div class="one whole padded"><a role="button" href="home.html" class="gap-bottom gap-right">Hyperlink</a><a role="button" href="#link-types" class="gap-bottom gap-right">Anchor</a><a role="button" href="https://google.com" class="gap-bottom gap-right">Secure</a><a role="button" href="http://google.com" target="_blank" class="gap-bottom gap-right">New Window</a><a role="button" href="view-source:http://google.com" class="gap-bottom gap-right">View Source</a><a role="button" href="example.gif" class="gap-bottom gap-right">Image</a><a role="button" href="example.pdf" class="gap-bottom gap-right">PDF Document</a><a role="button" href="example.doc" class="gap-bottom gap-right">Word Document</a><a role="button" href="example.txt" class="gap-bottom gap-right">Text Document</a><a role="button" href="example.md" class="gap-bottom gap-right">Markdown Document</a><a role="button" href="example.zip" class="gap-bottom gap-right">ZIP File</a><a role="button" href="example.exe" class="gap-bottom gap-right">Executable File</a><a role="button" href="home.html" rel="home" class="gap-bottom gap-right">Home</a><a role="button" href="#" rel="search" class="gap-bottom gap-right">Search</a><a role="button" href="#" rel="author" class="gap-bottom gap-right">Author</a><a role="button" href="#" rel="help" class="gap-bottom gap-right">Help</a><a role="button" href="#" rel="tag" class="gap-bottom gap-right">Tag</a><a role="button" href="#" rel="bookmark" class="gap-bottom gap-right">Bookmark</a><a role="button" href="#" rel="prev" class="gap-bottom gap-right">Previous</a><a role="button" href="#" rel="next" class="gap-bottom gap-right">Next</a><a role="button" href="#" rel="directory" class="gap-bottom gap-right">Directory</a><a role="button" href="#" rel="payment" class="gap-bottom gap-right">Payment</a><a role="button" href="mailto:user@example.com" class="gap-bottom gap-right">Email</a><a role="button" href="tel:5555551212" class="gap-bottom gap-right">Telephone</a><a role="button" href="mailto:user@gmail.com" class="gap-bottom gap-right">Gmail</a><a role="button" href="skype:skypeusername" class="gap-bottom gap-right">Skype</a><a role="button" href="example.rss" class="gap-bottom gap-right">RSS</a><a role="button" href="http://twitter.com" class="gap-bottom gap-right">Twitter</a><a role="button" href="http://facebook.com" class="gap-bottom gap-right">Facebook</a><a role="button" href="http://tumblr.com" class="gap-bottom gap-right">Tumblr</a><a role="button" href="http://linkedin.com" class="gap-bottom gap-right">LinkedIn</a><a role="button" href="http://plus.google.com" class="gap-bottom gap-right">Google Plus</a><a role="button" href="http://youtube.com" class="gap-bottom gap-right">Youtube</a><a role="button" href="http://github.com" class="gap-bottom gap-right">Github</a><a role="button" href="http://stackoverflow.com" class="gap-bottom gap-right">Stack Overflow</a><a role="button" href="http://instagram.com" class="gap-bottom gap-right">Instagram</a><a role="button" href="http://flickr.com" class="gap-bottom gap-right">Flickr</a><a role="button" href="http://foursquare.com" class="gap-bottom gap-right">Foursquare</a><a role="button" href="http://dribbble.com" class="gap-bottom gap-right">Dribbble</a><a role="button" href="http://dropbox.com" class="gap-bottom gap-right">Dropbox</a><a role="button" href="http://trello.com" class="gap-bottom gap-right">Trello</a></div>
+            </div>
+          </div>
+          <hr><br>
+          <h4>Button Groups</h4>
+          <div class="row">
+            <div class="one half padded">
+              <ul class="button-group">
+                <li>
+                  <button>Normal</button>
+                </li>
+                <li>
+                  <button disabled="disabled" aria-disabled="true">Disabled</button>
+                </li>
+                <li>
+                  <button aria-selected="true">Active</button>
+                </li>
+              </ul>
+            </div>
+            <div class="one half padded">
+              <ul class="button-group">
+                <li>
+                  <button class="blue">Normal</button>
+                </li>
+                <li>
+                  <button disabled="disabled" aria-disabled="true" class="turquoise">Disabled</button>
+                </li>
+                <li>
+                  <button aria-selected="true" class="green">Active</button>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one half padded">
+              <ul class="button-group">
+                <li>
+                  <button><i class="icon-github-alt"></i></button>
+                </li>
+                <li>
+                  <button><i class="icon-twitter"></i></button>
+                </li>
+                <li>
+                  <button><i class="icon-linkedin-sign"></i></button>
+                </li>
+                <li>
+                  <button><i class="icon-google-plus"></i></button>
+                </li>
+                <li>
+                  <button><i class="icon-facebook-sign"></i></button>
+                </li>
+                <li>
+                  <button><i class="icon-pinterest"></i></button>
+                </li>
+              </ul>
+            </div>
+            <div class="one half padded">
+              <ul class="button-group">
+                <li>
+                  <button class="yellow"><i class="icon-github-alt"></i></button>
+                </li>
+                <li>
+                  <button class="orange"><i class="icon-twitter"></i></button>
+                </li>
+                <li>
+                  <button class="red"><i class="icon-linkedin-sign"></i></button>
+                </li>
+                <li>
+                  <button class="pink"><i class="icon-google-plus"></i></button>
+                </li>
+                <li>
+                  <button class="purple"><i class="icon-facebook-sign"></i></button>
+                </li>
+                <li>
+                  <button class="asphalt"><i class="icon-pinterest"></i></button>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <hr><br>
+          <h4>Button Dropdown Menus</h4>
+          <div class="row">
+            <div class="one half padded">
+              <div class="dropdown">
+                <button>Dropdown Menu Button</button>
+                <ul>
+                  <li>
+                    <button><i class="icon-home"></i> Example Menu Item 1</button>
+                  </li>
+                  <li>
+                    <button><i class="icon-envelope-alt"></i> Example Menu Item 2</button>
+                  </li>
+                  <li>
+                    <hr>
+                  </li>
+                  <li>
+                    <button><i class="icon-heart"></i> Seperated Menu Item</button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="one half padded">
+              <div class="dropdown large">
+                <button>Large Dropdown Button</button>
+                <ul>
+                  <li>
+                    <button><i class="icon-home"></i> Example Menu Item 1</button>
+                  </li>
+                  <li>
+                    <button><i class="icon-envelope-alt"></i> Example Menu Item 2</button>
+                  </li>
+                  <li>
+                    <hr>
+                  </li>
+                  <li>
+                    <button><i class="icon-heart"></i> Seperated Menu Item</button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one half padded">
+                <div class="dropdown">
+                  <button class="blue">Dropdown Menu Button</button>
+                  <ul>
+                    <li>
+                      <button><i class="icon-home"></i> Example Menu Item 1</button>
+                    </li>
+                    <li>
+                      <button><i class="icon-envelope-alt"></i> Example Menu Item 2</button>
+                    </li>
+                    <li>
+                      <hr>
+                    </li>
+                    <li>
+                      <button><i class="icon-heart"></i> Seperated Menu Item</button>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded">
+          <h4>Example Usage</h4>
+          <div class="row">
+            <div class="one half">
+              <div class="row">
+                <div class="one third small-tablet pad-top pad-left pad-right align-center">
+                  <div class="pad-top">
+                    <button>Normal Button</button>
+                  </div>
+                </div>
+                <div class="two thirds small-tablet padded">
+                  <pre data-lang="html">&lt;button&gt;Normal Button&lt;/button&gt;</pre>
+                </div>
+              </div>
+            </div>
+            <div class="one half">
+              <div class="row">
+                <div class="one third small-tablet pad-top pad-left pad-right align-center">
+                  <div class="pad-top">
+                    <input type="button" value="Input Button">
+                  </div>
+                </div>
+                <div class="two thirds small-tablet padded">
+                  <pre data-lang="html">&lt;input type=&quot;button&quot; value=&quot;Input Button&quot; /&gt;</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one half">
+              <div class="row">
+                <div class="one third small-tablet pad-top pad-left pad-right align-center">
+                  <div class="pad-top"><a role="button" href="#" class="gap-bottom gap-right">ARIA Role Button</a></div>
+                </div>
+                <div class="two thirds small-tablet padded">
+                  <pre data-lang="html">&lt;a role=&quot;button&quot; href=&quot;#&quot;&gt;ARIA Role Button&lt;/button&gt;</pre>
+                </div>
+              </div>
+            </div>
+            <div class="one half">
+              <div class="row">
+                <div class="one third small-tablet pad-top pad-left pad-right align-center">
+                  <div class="pad-top"><a href="#" class="blue button">Blue Button</a></div>
+                </div>
+                <div class="two thirds small-tablet padded">
+                  <pre data-lang="html">&lt;a class=&quot;blue button&quot; href=&quot;#&quot;&gt;Blue Button&lt;/a&gt;</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/forms.html.erb b/app/views/groundworkdocs/forms.html.erb
new file mode 100644
index 0000000..e56ccbe
--- /dev/null
+++ b/app/views/groundworkdocs/forms.html.erb
@@ -0,0 +1,399 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Form Elements</h1>
+            <p class="quicksand">Easy to customize & flexible form elements wrapped in the grid system.</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 10 of 14</p>
+            <p><a href="tables.html" rel="prev" class="blue button">Back</a> <a href="icons.html" rel="next" class="green button">Next: Icons</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row bounceInLeft animated">
+        <div class="one whole padded">
+          <h4>Form Validation</h4>
+          <div class="row">
+            <div class="one half padded">
+              <p>Invalid Entry</p>
+              <p class="invalid">
+                <input value="Invalid entry">
+              </p>
+              <div class="invalid row">
+                <div class="one mobile tenth"><span class="prefix">@</span></div>
+                <div class="nine mobile tenths">
+                  <input value="Invalid entry">
+                </div>
+              </div>
+            </div>
+            <div class="one half padded">
+              <p>Validated Entry</p>
+              <p class="valid">
+                <input value="Valid entry">
+              </p>
+              <div class="valid row">
+                <div class="one mobile tenth"><span class="prefix">@</span></div>
+                <div class="nine mobile tenths">
+                  <input value="Valid entry">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row gap-top">
+            <div class="one half pad-left pad-right">
+              <pre data-lang="html">&lt;p class=&quot;invalid&quot;&gt;
+  &lt;input value=&quot;Invalid entry&quot;&gt;
+&lt;/p&gt;
+&lt;div class=&quot;invalid row&quot;&gt;
+  &lt;div class=&quot;one mobile tenth&quot;&gt;&lt;span class=&quot;prefix&quot;&gt;@&lt;/span&gt;&lt;/div&gt;
+  &lt;div class=&quot;nine mobile tenths&quot;&gt;
+    &lt;input value=&quot;Invalid entry&quot;&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+            <div class="one half pad-left pad-right">
+              <pre data-lang="html">&lt;p class=&quot;valid&quot;&gt;
+  &lt;input value=&quot;Valid entry&quot;&gt;
+&lt;/p&gt;
+&lt;div class=&quot;valid row&quot;&gt;
+  &lt;div class=&quot;one mobile tenth&quot;&gt;&lt;span class=&quot;prefix&quot;&gt;@&lt;/span&gt;&lt;/div&gt;
+  &lt;div class=&quot;nine mobile tenths&quot;&gt;
+    &lt;input value=&quot;Valid entry&quot;&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr><br>
+      <div class="row bounceInRight animated">
+        <div class="one whole padded">
+          <form action="#" method="post">
+            <fieldset>
+              <legend>Example HTML5 Form</legend>
+              <div class="row">
+                <div class="one half padded">
+                  <label for="name">Text Field</label>
+                  <input id="name" type="text" placeholder="First &amp; Last Name">
+                </div>
+                <div class="one half padded">
+                  <label for="email">Email Field</label>
+                  <input id="email" type="email" placeholder="you@example.com">
+                </div>
+              </div>
+              <div class="row">
+                <div class="one whole padded">
+                  <label for="address">Address</label>
+                  <input id="address" type="text" placeholder="Street Address">
+                </div>
+              </div>
+              <div class="row">
+                <div class="two fourths padded">
+                  <input type="text" placeholder="City">
+                </div>
+                <div class="one fourth padded"><span class="select-wrap">
+                    <select class="unselected">
+                      <option value="" disabled="" selected="">State</option>
+                      <option value="AL">Alabama</option>
+                      <option value="AK">Alaska</option>
+                      <option value="AZ">Arizona</option>
+                      <option value="AR">Arkansas</option>
+                      <option value="CA">California</option>
+                      <option value="CO">Colorado</option>
+                      <option value="CT">Connecticut</option>
+                      <option value="DE">Delaware</option>
+                      <option value="FL">Florida</option>
+                      <option value="GA">Georgia</option>
+                      <option value="HI">Hawaii</option>
+                      <option value="ID">Idaho</option>
+                      <option value="IL">Illinois</option>
+                      <option value="IN">Indiana</option>
+                      <option value="IA">Iowa</option>
+                      <option value="KS">Kansas</option>
+                      <option value="KY">Kentucky</option>
+                      <option value="LA">Louisiana</option>
+                      <option value="ME">Maine</option>
+                      <option value="MD">Maryland</option>
+                      <option value="MA">Massachusetts</option>
+                      <option value="MI">Michigan</option>
+                      <option value="MN">Minnesota</option>
+                      <option value="MS">Mississippi</option>
+                      <option value="MO">Missouri</option>
+                      <option value="MT">Montana</option>
+                      <option value="NE">Nebraska</option>
+                      <option value="NV">Nevada</option>
+                      <option value="NH">New Hampshire</option>
+                      <option value="NJ">New Jersey</option>
+                      <option value="NM">New Mexico</option>
+                      <option value="NY">New York</option>
+                      <option value="NC">North Carolina</option>
+                      <option value="ND">North Dakota</option>
+                      <option value="OH">Ohio</option>
+                      <option value="OK">Oklahoma</option>
+                      <option value="OR">Oregon</option>
+                      <option value="PA">Pennsylvania</option>
+                      <option value="RI">Rhode Island</option>
+                      <option value="SC">South Carolina</option>
+                      <option value="SD">South Dakota</option>
+                      <option value="TN">Tennessee</option>
+                      <option value="TX">Texas</option>
+                      <option value="UT">Utah</option>
+                      <option value="VT">Vermont</option>
+                      <option value="VA">Virginia</option>
+                      <option value="WA">Washington</option>
+                      <option value="WV">West Virginia</option>
+                      <option value="WI">Wisconsin</option>
+                      <option value="WY">Wyoming</option>
+                      <option value="AS">American Samoa</option>
+                      <option value="DC">District of Columbia</option>
+                      <option value="FM">Federated States of Micronesia</option>
+                      <option value="GU">Guam</option>
+                      <option value="MH">Marshall Islands</option>
+                      <option value="MP">Northern Mariana Islands</option>
+                      <option value="PW">Palau</option>
+                      <option value="PR">Puerto Rico</option>
+                      <option value="VI">Virgin Islands</option>
+                      <option value="AE">Armed Forces Africa</option>
+                      <option value="AA">Armed Forces Americas</option>
+                      <option value="AE">Armed Forces Canada</option>
+                      <option value="AE">Armed Forces Europe</option>
+                      <option value="AE">Armed Forces Middle East</option>
+                      <option value="AP">Armed Forces Pacific</option>
+                      <option value="AB">Alberta</option>
+                      <option value="BC">British Columbia</option>
+                      <option value="MB">Manitoba</option>
+                      <option value="NB">New Brunswick</option>
+                      <option value="NL">Newfoundland and Labrador</option>
+                      <option value="NS">Nova Scotia</option>
+                      <option value="NT">Northwest Territories</option>
+                      <option value="NU">Nunavut</option>
+                      <option value="ON">Ontario</option>
+                      <option value="PE">Prince Edward Island</option>
+                      <option value="QC">Quebec</option>
+                      <option value="SK">Saskatchewan</option>
+                      <option value="YT">Yukon Territory</option>
+                    </select></span></div>
+                <div class="one fourth padded">
+                  <input type="text" placeholder="Zip Code">
+                </div>
+              </div>
+              <div class="row">
+                <div class="one whole padded">
+                  <label for="message">Special Instructions</label>
+                  <textarea id="message" placeholder="Enter your message..."></textarea>
+                </div>
+              </div>
+              <div class="row">
+                <div class="one whole pad-left">
+                  <label for="twitter">Prefixed & Suffixed</label>
+                </div>
+              </div>
+              <div class="row">
+                <div class="one half padded">
+                  <div class="row">
+                    <div class="one mobile sixth"><span class="prefix">@</span></div>
+                    <div class="five mobile sixths">
+                      <input id="twitter" type="text" name="twitter" placeholder="twitter handle">
+                    </div>
+                  </div>
+                </div>
+                <div class="one half padded">
+                  <div class="row">
+                    <div class="three mobile fifths">
+                      <input type="text" name="sidereel" placeholder="desired username">
+                    </div>
+                    <div class="two mobile fifths"><span class="suffix">@example.com</span></div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="one whole padded">
+                  <label for="thing1">Radio Buttons:</label>
+                  <ul class="unstyled zero">
+                    <li>
+                      <input id="thing1" type="radio" name="things" checked="">
+                      <label for="thing1" class="inline">Thing one</label>
+                    </li>
+                    <li>
+                      <input id="thing2" type="radio" name="things">
+                      <label for="thing2" class="inline">Thing two</label>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="row">
+                <div class="one whole padded">
+                  <input id="allthings" type="checkbox" name="things" checked="">
+                  <label for="allthings" class="inline"> I want all the things!</label>
+                </div>
+              </div>
+            </fieldset>
+          </form>
+          <div class="row">
+            <div class="one whole pad-top">
+              <pre data-lang="html">&lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Example HTML5 Form&lt;/legend&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;one half padded&quot;&gt;
+        &lt;label for=&quot;name&quot;&gt;Text Field&lt;/label&gt;
+        &lt;input id=&quot;name&quot; type=&quot;text&quot; placeholder=&quot;First &amp; Last Name&quot;&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;one half padded&quot;&gt;
+        &lt;label for=&quot;email&quot;&gt;Email Field&lt;/label&gt;
+        &lt;input id=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;you@example.com&quot;&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;one whole padded&quot;&gt;
+        &lt;label for=&quot;address&quot;&gt;Address&lt;/label&gt;
+        &lt;input id=&quot;address&quot; type=&quot;text&quot; placeholder=&quot;Street Address&quot;&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;two fourths padded&quot;&gt;
+        &lt;input type=&quot;text&quot; placeholder=&quot;City&quot;&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;one fourth padded&quot;&gt;&lt;span class=&quot;select-wrap&quot;&gt;
+          &lt;select class=&quot;unselected&quot;&gt;
+            &lt;option value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;State&lt;/option&gt;
+            &lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
+            &lt;option value=&quot;AK&quot;&gt;Alaska&lt;/option&gt;
+            &lt;option value=&quot;AZ&quot;&gt;Arizona&lt;/option&gt;
+            &lt;option value=&quot;AR&quot;&gt;Arkansas&lt;/option&gt;
+            &lt;option value=&quot;CA&quot;&gt;California&lt;/option&gt;
+            &lt;option value=&quot;CO&quot;&gt;Colorado&lt;/option&gt;
+            &lt;option value=&quot;CT&quot;&gt;Connecticut&lt;/option&gt;
+            &lt;option value=&quot;DE&quot;&gt;Delaware&lt;/option&gt;
+            &lt;option value=&quot;FL&quot;&gt;Florida&lt;/option&gt;
+            &lt;option value=&quot;GA&quot;&gt;Georgia&lt;/option&gt;
+            &lt;option value=&quot;HI&quot;&gt;Hawaii&lt;/option&gt;
+            &lt;option value=&quot;ID&quot;&gt;Idaho&lt;/option&gt;
+            &lt;option value=&quot;IL&quot;&gt;Illinois&lt;/option&gt;
+            &lt;option value=&quot;IN&quot;&gt;Indiana&lt;/option&gt;
+            &lt;option value=&quot;IA&quot;&gt;Iowa&lt;/option&gt;
+            &lt;option value=&quot;KS&quot;&gt;Kansas&lt;/option&gt;
+            &lt;option value=&quot;KY&quot;&gt;Kentucky&lt;/option&gt;
+            &lt;option value=&quot;LA&quot;&gt;Louisiana&lt;/option&gt;
+            &lt;option value=&quot;ME&quot;&gt;Maine&lt;/option&gt;
+            &lt;option value=&quot;MD&quot;&gt;Maryland&lt;/option&gt;
+            &lt;option value=&quot;MA&quot;&gt;Massachusetts&lt;/option&gt;
+            &lt;option value=&quot;MI&quot;&gt;Michigan&lt;/option&gt;
+            &lt;option value=&quot;MN&quot;&gt;Minnesota&lt;/option&gt;
+            &lt;option value=&quot;MS&quot;&gt;Mississippi&lt;/option&gt;
+            &lt;option value=&quot;MO&quot;&gt;Missouri&lt;/option&gt;
+            &lt;option value=&quot;MT&quot;&gt;Montana&lt;/option&gt;
+            &lt;option value=&quot;NE&quot;&gt;Nebraska&lt;/option&gt;
+            &lt;option value=&quot;NV&quot;&gt;Nevada&lt;/option&gt;
+            &lt;option value=&quot;NH&quot;&gt;New Hampshire&lt;/option&gt;
+            &lt;option value=&quot;NJ&quot;&gt;New Jersey&lt;/option&gt;
+            &lt;option value=&quot;NM&quot;&gt;New Mexico&lt;/option&gt;
+            &lt;option value=&quot;NY&quot;&gt;New York&lt;/option&gt;
+            &lt;option value=&quot;NC&quot;&gt;North Carolina&lt;/option&gt;
+            &lt;option value=&quot;ND&quot;&gt;North Dakota&lt;/option&gt;
+            &lt;option value=&quot;OH&quot;&gt;Ohio&lt;/option&gt;
+            &lt;option value=&quot;OK&quot;&gt;Oklahoma&lt;/option&gt;
+            &lt;option value=&quot;OR&quot;&gt;Oregon&lt;/option&gt;
+            &lt;option value=&quot;PA&quot;&gt;Pennsylvania&lt;/option&gt;
+            &lt;option value=&quot;RI&quot;&gt;Rhode Island&lt;/option&gt;
+            &lt;option value=&quot;SC&quot;&gt;South Carolina&lt;/option&gt;
+            &lt;option value=&quot;SD&quot;&gt;South Dakota&lt;/option&gt;
+            &lt;option value=&quot;TN&quot;&gt;Tennessee&lt;/option&gt;
+            &lt;option value=&quot;TX&quot;&gt;Texas&lt;/option&gt;
+            &lt;option value=&quot;UT&quot;&gt;Utah&lt;/option&gt;
+            &lt;option value=&quot;VT&quot;&gt;Vermont&lt;/option&gt;
+            &lt;option value=&quot;VA&quot;&gt;Virginia&lt;/option&gt;
+            &lt;option value=&quot;WA&quot;&gt;Washington&lt;/option&gt;
+            &lt;option value=&quot;WV&quot;&gt;West Virginia&lt;/option&gt;
+            &lt;option value=&quot;WI&quot;&gt;Wisconsin&lt;/option&gt;
+            &lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
+            &lt;option value=&quot;AS&quot;&gt;American Samoa&lt;/option&gt;
+            &lt;option value=&quot;DC&quot;&gt;District of Columbia&lt;/option&gt;
+            &lt;option value=&quot;FM&quot;&gt;Federated States of Micronesia&lt;/option&gt;
+            &lt;option value=&quot;GU&quot;&gt;Guam&lt;/option&gt;
+            &lt;option value=&quot;MH&quot;&gt;Marshall Islands&lt;/option&gt;
+            &lt;option value=&quot;MP&quot;&gt;Northern Mariana Islands&lt;/option&gt;
+            &lt;option value=&quot;PW&quot;&gt;Palau&lt;/option&gt;
+            &lt;option value=&quot;PR&quot;&gt;Puerto Rico&lt;/option&gt;
+            &lt;option value=&quot;VI&quot;&gt;Virgin Islands&lt;/option&gt;
+            &lt;option value=&quot;AE&quot;&gt;Armed Forces Africa&lt;/option&gt;
+            &lt;option value=&quot;AA&quot;&gt;Armed Forces Americas&lt;/option&gt;
+            &lt;option value=&quot;AE&quot;&gt;Armed Forces Canada&lt;/option&gt;
+            &lt;option value=&quot;AE&quot;&gt;Armed Forces Europe&lt;/option&gt;
+            &lt;option value=&quot;AE&quot;&gt;Armed Forces Middle East&lt;/option&gt;
+            &lt;option value=&quot;AP&quot;&gt;Armed Forces Pacific&lt;/option&gt;
+            &lt;option value=&quot;AB&quot;&gt;Alberta&lt;/option&gt;
+            &lt;option value=&quot;BC&quot;&gt;British Columbia&lt;/option&gt;
+            &lt;option value=&quot;MB&quot;&gt;Manitoba&lt;/option&gt;
+            &lt;option value=&quot;NB&quot;&gt;New Brunswick&lt;/option&gt;
+            &lt;option value=&quot;NL&quot;&gt;Newfoundland and Labrador&lt;/option&gt;
+            &lt;option value=&quot;NS&quot;&gt;Nova Scotia&lt;/option&gt;
+            &lt;option value=&quot;NT&quot;&gt;Northwest Territories&lt;/option&gt;
+            &lt;option value=&quot;NU&quot;&gt;Nunavut&lt;/option&gt;
+            &lt;option value=&quot;ON&quot;&gt;Ontario&lt;/option&gt;
+            &lt;option value=&quot;PE&quot;&gt;Prince Edward Island&lt;/option&gt;
+            &lt;option value=&quot;QC&quot;&gt;Quebec&lt;/option&gt;
+            &lt;option value=&quot;SK&quot;&gt;Saskatchewan&lt;/option&gt;
+            &lt;option value=&quot;YT&quot;&gt;Yukon Territory&lt;/option&gt;
+          &lt;/select&gt;&lt;/span&gt;&lt;/div&gt;
+      &lt;div class=&quot;one fourth padded&quot;&gt;
+        &lt;input type=&quot;text&quot; placeholder=&quot;Zip Code&quot;&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;one whole padded&quot;&gt;
+        &lt;label for=&quot;message&quot;&gt;Special Instructions&lt;/label&gt;
+        &lt;textarea id=&quot;message&quot; placeholder=&quot;Enter your message...&quot;&gt;&lt;/textarea&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;one whole pad-left&quot;&gt;
+        &lt;label for=&quot;twitter&quot;&gt;Prefixed &amp; Suffixed&lt;/label&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;one half padded&quot;&gt;
+        &lt;div class=&quot;row&quot;&gt;
+          &lt;div class=&quot;one mobile sixth&quot;&gt;&lt;span class=&quot;prefix&quot;&gt;@&lt;/span&gt;&lt;/div&gt;
+          &lt;div class=&quot;five mobile sixths&quot;&gt;
+            &lt;input id=&quot;twitter&quot; type=&quot;text&quot; name=&quot;twitter&quot; placeholder=&quot;twitter handle&quot;&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;one half padded&quot;&gt;
+        &lt;div class=&quot;row&quot;&gt;
+          &lt;div class=&quot;three mobile fifths&quot;&gt;
+            &lt;input type=&quot;text&quot; name=&quot;sidereel&quot; placeholder=&quot;desired username&quot;&gt;
+          &lt;/div&gt;
+          &lt;div class=&quot;two mobile fifths&quot;&gt;&lt;span class=&quot;suffix&quot;&gt;@example.com&lt;/span&gt;&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;one whole padded&quot;&gt;
+        &lt;label for=&quot;thing1&quot;&gt;Radio Buttons:&lt;/label&gt;
+        &lt;ul class=&quot;unstyled zero&quot;&gt;
+          &lt;li&gt;
+            &lt;input id=&quot;thing1&quot; type=&quot;radio&quot; name=&quot;things&quot; checked=&quot;&quot;&gt;
+            &lt;label for=&quot;thing1&quot; class=&quot;inline&quot;&gt;Thing one&lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;input id=&quot;thing2&quot; type=&quot;radio&quot; name=&quot;things&quot;&gt;
+            &lt;label for=&quot;thing2&quot; class=&quot;inline&quot;&gt;Thing two&lt;/label&gt;
+          &lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;one whole padded&quot;&gt;
+        &lt;input id=&quot;allthings&quot; type=&quot;checkbox&quot; name=&quot;things&quot; checked=&quot;&quot;&gt;
+        &lt;label for=&quot;allthings&quot; class=&quot;inline&quot;&gt; I want all the things!&lt;/label&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/grid.html.erb b/app/views/groundworkdocs/grid.html.erb
new file mode 100644
index 0000000..f3c23d8
--- /dev/null
+++ b/app/views/groundworkdocs/grid.html.erb
@@ -0,0 +1,582 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Grid System</h1>
+            <p class="quicksand">A responsive and adaptive fractional grid system created by <a href="http://twitter.com/ghepting" target="_blank">Gary Hepting</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 1 of 14</p>
+            <p><a href="layout_c.html" rel="prev" class="blue button">Back</a> <a href="helpers.html" rel="next" class="green button">Next: Helpers</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4 class="zero">Grid Breakpoint Helpers</h4>
+            <p class="small">By default, grid columns collapse into rows at the <code class="inline">$small-tablet</code> breakpoint. The grid breakpoint helpers allow you to target the breakpoint that the grid structure should persist through.</p>
+            <div class="row">
+              <div class="one fifth">
+                <p>Desktop Grid (default)</p>
+              </div>
+              <div class="four fifths">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one half">1/2</div>
+                    <div class="one half">1/2</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one half&quot;&gt;1/2&lt;/div&gt;
+  &lt;div class=&quot;one half&quot;&gt;1/2&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth">
+                <p>Small-Tablet Grid</p>
+              </div>
+              <div class="four fifths">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one half small-tablet">1/2</div>
+                    <div class="one half small-tablet">1/2</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one half small-tablet&quot;&gt;1/2&lt;/div&gt;
+  &lt;div class=&quot;one half small-tablet&quot;&gt;1/2&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth">
+                <p>Mobile Grid</p>
+              </div>
+              <div class="four fifths">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one half mobile">1/2</div>
+                    <div class="one half mobile">1/2</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one half mobile&quot;&gt;1/2&lt;/div&gt;
+  &lt;div class=&quot;one half mobile&quot;&gt;1/2&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div>
+          </div><br>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Grid Adapters</h4>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>iPad Adapters</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one fourth two-up-ipad">1/4 to 2-up</div>
+                    <div class="one fourth two-up-ipad">1/4 to 2-up</div>
+                    <div class="one fourth two-up-ipad">1/4 to 2-up</div>
+                    <div class="one fourth two-up-ipad">1/4 to 2-up</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one fourth two-up-ipad&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth two-up-ipad&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth two-up-ipad&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth two-up-ipad&quot;&gt;1/4 to 2-up&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Small-Tablet Adapters</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
+                    <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
+                    <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
+                    <div class="one fourth two-up-small-tablet">1/4 to 2-up</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one fourth two-up-small-tablet&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth two-up-small-tablet&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth two-up-small-tablet&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth two-up-small-tablet&quot;&gt;1/4 to 2-up&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Mobile Adapters</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
+                    <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
+                    <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
+                    <div class="one fourth small-tablet two-up-mobile">1/4 to 2-up</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one fourth small-tablet two-up-mobile&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth small-tablet two-up-mobile&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth small-tablet two-up-mobile&quot;&gt;1/4 to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one fourth small-tablet two-up-mobile&quot;&gt;1/4 to 2-up&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Combined Adapters</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
+                    <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
+                    <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
+                    <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
+                    <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
+                    <div class="one sixth three-up-small-tablet two-up-mobile">1/6 to 3-up to 2-up</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one sixth three-up-small-tablet two-up-mobile&quot;&gt;1/6 to 3-up to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one sixth three-up-small-tablet two-up-mobile&quot;&gt;1/6 to 3-up to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one sixth three-up-small-tablet two-up-mobile&quot;&gt;1/6 to 3-up to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one sixth three-up-small-tablet two-up-mobile&quot;&gt;1/6 to 3-up to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one sixth three-up-small-tablet two-up-mobile&quot;&gt;1/6 to 3-up to 2-up&lt;/div&gt;
+  &lt;div class=&quot;one sixth three-up-small-tablet two-up-mobile&quot;&gt;1/6 to 3-up to 2-up&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div>
+          </div><br>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>Grid Fractions</h4>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Halves</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one half">1/2</div>
+                    <div class="one half">1/2</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one half&quot;&gt;1/2&lt;/div&gt;
+  &lt;div class=&quot;one half&quot;&gt;1/2&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Thirds</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one third">1/3</div>
+                    <div class="two thirds">2/3</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one third&quot;&gt;1/3&lt;/div&gt;
+  &lt;div class=&quot;two thirds&quot;&gt;2/3&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Fourths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one fourth">1/4</div>
+                    <div class="three fourths">3/4</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one fourth&quot;&gt;1/4&lt;/div&gt;
+  &lt;div class=&quot;three fourths&quot;&gt;3/4&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Fifths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one fifth">1/5</div>
+                    <div class="three fifths">3/5</div>
+                    <div class="one fifth">1/5</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one fifth&quot;&gt;1/5&lt;/div&gt;
+  &lt;div class=&quot;three fifths&quot;&gt;3/5&lt;/div&gt;
+  &lt;div class=&quot;one fifth&quot;&gt;1/5&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Sixths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one sixth">1/6</div>
+                    <div class="two sixths">2/6</div>
+                    <div class="three sixths">3/6</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one sixth&quot;&gt;1/6&lt;/div&gt;
+  &lt;div class=&quot;two sixths&quot;&gt;2/6&lt;/div&gt;
+  &lt;div class=&quot;three sixths&quot;&gt;3/6&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Sevenths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one seventh">1/7</div>
+                    <div class="two sevenths">2/7</div>
+                    <div class="four sevenths">4/7</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one seventh&quot;&gt;1/7&lt;/div&gt;
+  &lt;div class=&quot;two sevenths&quot;&gt;2/7&lt;/div&gt;
+  &lt;div class=&quot;four sevenths&quot;&gt;4/7&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Eighths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one eighth">1/8</div>
+                    <div class="two eighths">2/8</div>
+                    <div class="five eighths">5/8</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one eighth&quot;&gt;1/8&lt;/div&gt;
+  &lt;div class=&quot;two eighths&quot;&gt;2/8&lt;/div&gt;
+  &lt;div class=&quot;five eighths&quot;&gt;5/8&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Ninths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one ninth">1/9</div>
+                    <div class="three ninths">3/9</div>
+                    <div class="five ninths">5/9</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one ninth&quot;&gt;1/9&lt;/div&gt;
+  &lt;div class=&quot;three ninths&quot;&gt;3/9&lt;/div&gt;
+  &lt;div class=&quot;five ninths&quot;&gt;5/9&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Tenths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one tenth">1/10</div>
+                    <div class="three tenths">3/10</div>
+                    <div class="five tenths">5/10</div>
+                    <div class="one tenth">1/10</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one tenth&quot;&gt;1/10&lt;/div&gt;
+  &lt;div class=&quot;three tenths&quot;&gt;3/10&lt;/div&gt;
+  &lt;div class=&quot;five tenths&quot;&gt;5/10&lt;/div&gt;
+  &lt;div class=&quot;one tenth&quot;&gt;1/10&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Elevenths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one eleventh">1/11</div>
+                    <div class="three elevenths">3/11</div>
+                    <div class="five elevenths">5/11</div>
+                    <div class="two elevenths">2/11</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one eleventh&quot;&gt;1/11&lt;/div&gt;
+  &lt;div class=&quot;three elevenths&quot;&gt;3/11&lt;/div&gt;
+  &lt;div class=&quot;five elevenths&quot;&gt;5/11&lt;/div&gt;
+  &lt;div class=&quot;two elevenths&quot;&gt;2/11&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fifth small-tablet">
+                <p>Twelfths</p>
+              </div>
+              <div class="four fifths small-tablet">
+                <div class="demo">
+                  <div class="row">
+                    <div class="one twelfth">1/12</div>
+                    <div class="three twelfths">3/12</div>
+                    <div class="five twelfths">5/12</div>
+                    <div class="two twelfths">2/12</div>
+                    <div class="one twelfth">1/12</div>
+                  </div>
+                </div>
+                <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one twelfth&quot;&gt;1/12&lt;/div&gt;
+  &lt;div class=&quot;three twelfths&quot;&gt;3/12&lt;/div&gt;
+  &lt;div class=&quot;five twelfths&quot;&gt;5/12&lt;/div&gt;
+  &lt;div class=&quot;two twelfths&quot;&gt;2/12&lt;/div&gt;
+  &lt;div class=&quot;one twelfth&quot;&gt;1/12&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div>
+          </div><br>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4 class="zero">Column Shuffling/Source Reordering</h4>
+            <p>(Adapting column ordering without changing source order)</p>
+            <div class="demo reordering">
+              <div class="row">
+                <div class="one fifth right-four">1/5 (first)</div>
+                <div class="four fifths left-one">4/5 (last)</div>
+              </div>
+              <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one fifth right-four&quot;&gt;1/5 (first)&lt;/div&gt;
+  &lt;div class=&quot;four fifths left-one&quot;&gt;4/5 (last)&lt;/div&gt;
+&lt;/div&gt;</pre><br>
+              <div class="row">
+                <div class="two thirds right-one">2/3 (first)</div>
+                <div class="one third left-two">1/3 (last)</div>
+              </div>
+              <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;two thirds right-one&quot;&gt;2/3 (first)&lt;/div&gt;
+  &lt;div class=&quot;one third left-two&quot;&gt;1/3 (last)&lt;/div&gt;
+&lt;/div&gt;</pre><br>
+              <div class="row">
+                <div class="one fourth right-two">1/4 (first)</div>
+                <div class="one fourth left-one">1/4 (second)</div>
+                <div class="one fourth right-one">1/4 (third)</div>
+                <div class="one fourth left-two">1/4 (fourth)</div>
+              </div>
+              <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one fourth right-two&quot;&gt;1/4 (first)&lt;/div&gt;
+  &lt;div class=&quot;one fourth left-one&quot;&gt;1/4 (second)&lt;/div&gt;
+  &lt;div class=&quot;one fourth right-one&quot;&gt;1/4 (third)&lt;/div&gt;
+  &lt;div class=&quot;one fourth left-two&quot;&gt;1/4 (fourth)&lt;/div&gt;
+&lt;/div&gt;</pre><br>
+              <div class="row">
+                <div class="three eighths right-five">3/8 (first)</div>
+                <div class="two eighths left-three">2/8 (second)</div>
+                <div class="three eighths left-three">3/8 (third)</div>
+              </div>
+              <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;three eighths right-five&quot;&gt;3/8 (first)&lt;/div&gt;
+  &lt;div class=&quot;two eighths left-three&quot;&gt;2/8 (second)&lt;/div&gt;
+  &lt;div class=&quot;three eighths left-three&quot;&gt;3/8 (third)&lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+          </div><br>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>Centering</h4>
+            <div class="demo centering">
+              <div class="row">
+                <div class="one centered mobile seventh">1/7</div>
+              </div><br>
+              <div class="row">
+                <div class="one centered mobile fifth">1/5</div>
+              </div><br>
+              <div class="row">
+                <div class="one centered mobile third">1/3</div>
+              </div>
+              <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one centered mobile seventh&quot;&gt;1/7&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one centered mobile fifth&quot;&gt;1/5&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one centered mobile third&quot;&gt;1/3&lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+          </div><br>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Offsetting</h4>
+            <div class="offsetting demo">
+              <div class="row">
+                <div class="eleven mobile twelfths skip-one">11</div>
+              </div><br>
+              <div class="row">
+                <div class="ten mobile twelfths skip-two">10</div>
+              </div><br>
+              <div class="row">
+                <div class="nine mobile twelfths skip-three">9</div>
+              </div><br>
+              <div class="row">
+                <div class="eight mobile twelfths skip-four">8</div>
+              </div><br>
+              <div class="row">
+                <div class="seven mobile twelfths skip-five">7</div>
+              </div><br>
+              <div class="row">
+                <div class="six mobile twelfths skip-six">6</div>
+              </div><br>
+              <div class="row">
+                <div class="one mobile twelfth">1</div>
+                <div class="five mobile twelfths skip-six">5</div>
+              </div><br>
+              <div class="row">
+                <div class="two mobile twelfths">2</div>
+                <div class="four mobile twelfths skip-six">4</div>
+              </div><br>
+              <div class="row">
+                <div class="three mobile twelfths">3</div>
+                <div class="three mobile twelfths skip-six">3</div>
+              </div><br>
+              <div class="row">
+                <div class="four mobile twelfths">4</div>
+                <div class="two mobile twelfths skip-six">2</div>
+              </div><br>
+              <div class="row">
+                <div class="five mobile twelfths">5</div>
+                <div class="one mobile twelfth skip-six">1</div>
+              </div><br>
+              <div class="row">
+                <div class="four mobile fifths skip-one">4/5</div>
+              </div><br>
+              <div class="row">
+                <div class="eight mobile elevenths skip-three">8/11</div>
+              </div><br>
+              <div class="row">
+                <div class="five mobile sevenths skip-two">5/7</div>
+              </div>
+              <pre data-lang="html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;eleven mobile twelfths skip-one&quot;&gt;11&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;ten mobile twelfths skip-two&quot;&gt;10&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;nine mobile twelfths skip-three&quot;&gt;9&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;eight mobile twelfths skip-four&quot;&gt;8&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;seven mobile twelfths skip-five&quot;&gt;7&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;six mobile twelfths skip-six&quot;&gt;6&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;one mobile twelfth&quot;&gt;1&lt;/div&gt;
+  &lt;div class=&quot;five mobile twelfths skip-six&quot;&gt;5&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;two mobile twelfths&quot;&gt;2&lt;/div&gt;
+  &lt;div class=&quot;four mobile twelfths skip-six&quot;&gt;4&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;three mobile twelfths&quot;&gt;3&lt;/div&gt;
+  &lt;div class=&quot;three mobile twelfths skip-six&quot;&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;four mobile twelfths&quot;&gt;4&lt;/div&gt;
+  &lt;div class=&quot;two mobile twelfths skip-six&quot;&gt;2&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;five mobile twelfths&quot;&gt;5&lt;/div&gt;
+  &lt;div class=&quot;one mobile twelfth skip-six&quot;&gt;1&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;four mobile fifths skip-one&quot;&gt;4/5&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;eight mobile elevenths skip-three&quot;&gt;8/11&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;five mobile sevenths skip-two&quot;&gt;5/7&lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+          </div><br>
+          <hr><br>
+          <div class="bounceInUp animated">
+            <h4>Equal Columns</h4>
+            <div class="demo equal-columns">
+              <div class="equalize row">
+                <div class="one third padded">
+                  <h1>First Column</h1>
+                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+                </div>
+                <div class="one third padded">
+                  <h1>Second Column</h1>
+                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+                </div>
+                <div class="one third padded">
+                  <h1>Third Column</h1>
+                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+                </div>
+              </div>
+            </div>
+            <pre data-lang="html">&lt;div class=&quot;equalize row&quot;&gt;
+  &lt;div class=&quot;one third padded&quot;&gt;
+    &lt;h1&gt;First Column&lt;/h1&gt;
+    &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;one third padded&quot;&gt;
+    &lt;h1&gt;Second Column&lt;/h1&gt;
+    &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;one third padded&quot;&gt;
+    &lt;h1&gt;Third Column&lt;/h1&gt;
+    &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+          </div><br>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/helpers.html.erb b/app/views/groundworkdocs/helpers.html.erb
new file mode 100644
index 0000000..1aa3000
--- /dev/null
+++ b/app/views/groundworkdocs/helpers.html.erb
@@ -0,0 +1,326 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Helpers</h1>
+            <p class="quicksand"><a href="breakpoints.html">Breakpoint-targeted</a> layout, typographic, and conditional helpers for responsive & adaptive layouts</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 2 of 14</p>
+            <p><a href="grid.html" rel="prev" class="blue button">Back</a> <a href="typography.html" rel="next" class="green button">Next: Typography</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded bounceInLeft animated">
+          <h4 class="zero">Conditional Display Helpers</h4>
+          <p class="small">Conditionally show and hide elements at <a href="breakpoints.html">targeted breakpoints</a></p>
+          <div class="row">
+            <div class="one half small-tablet padded">
+              <h4>Demonstration</h4>
+              <ol class="list large">
+                <li class="green desktop-only">desktop-only</li>
+                <li class="blue hide-on-desktop">hide-on-desktop</li>
+                <li class="green ipad-only">ipad-only</li>
+                <li class="blue hide-on-ipad">hide-on-ipad</li>
+                <li class="green small-tablet-only">small-tablet-only</li>
+                <li class="blue hide-on-small-tablet">hide-on-small-tablet</li>
+                <li class="green mobile-only">mobile-only</li>
+                <li class="blue hide-on-mobile">hide-on-mobile</li>
+              </ol>
+            </div>
+            <div class="one half small-tablet padded">
+              <h4 class="double gap-top-mobile">Conditional Display Classes</h4>
+              <ol class="list">
+                <li><code class="inline">.desktop-only</code></li>
+                <li><code class="inline">.hide-on-desktop</code></li>
+                <li><code class="inline">.ipad-only</code></li>
+                <li><code class="inline">.hide-on-ipad</code></li>
+                <li><code class="inline">.small-tablet-only</code></li>
+                <li><code class="inline">.hide-on-small-tablet</code></li>
+                <li><code class="inline">.mobile-only</code></li>
+                <li><code class="inline">.hide-on-mobile</code></li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInRight animated">
+          <h4 class="zero">Spacing Helpers</h4>
+          <p class="small">
+
+            With breakpoint-targeted conditional classes and overrides. (i.e. - <code class="inline">.no-pad-mobile</code>,  <code class="inline">.no-gap-desktop</code>,  <code class="inline">.double.gap-top-mobile</code>,  <code class="inline">.padded-small-tablet</code>,  <code class="inline">.padded-mobile</code>, etc.)
+          </p>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Padded</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="padded">.padded</div>
+                  <div class="pad-top">.pad-top</div>
+                  <div class="pad-right">.pad-right</div>
+                  <div class="pad-bottom">.pad-bottom</div>
+                  <div class="pad-left">.pad-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Double</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="double padded">.double.padded</div>
+                  <div class="double pad-top">.double.pad-top</div>
+                  <div class="double pad-right">.double.pad-right</div>
+                  <div class="double pad-bottom">.double.pad-bottom</div>
+                  <div class="double pad-left">.double.pad-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Triple</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="triple padded">.triple.padded</div>
+                  <div class="triple pad-top">.triple.pad-top</div>
+                  <div class="triple pad-right">.triple.pad-right</div>
+                  <div class="triple pad-bottom">.triple.pad-bottom</div>
+                  <div class="triple pad-left">.triple.pad-left</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Gapped</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="gapped">.gapped</div>
+                  <div class="gap-top">.gap-top</div>
+                  <div class="gap-right">.gap-right</div>
+                  <div class="gap-bottom">.gap-bottom</div>
+                  <div class="gap-left">.gap-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Double</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="double gapped">.double.gapped</div>
+                  <div class="double gap-top">.double.gap-top</div>
+                  <div class="double gap-right">.double.gap-right</div>
+                  <div class="double gap-bottom">.double.gap-bottom</div>
+                  <div class="double gap-left">.double.gap-left</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Triple</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="triple gapped">.triple.gapped</div>
+                  <div class="triple gap-top">.triple.gap-top</div>
+                  <div class="triple gap-right">.triple.gap-right</div>
+                  <div class="triple gap-bottom">.triple.gap-bottom</div>
+                  <div class="triple gap-left">.triple.gap-left</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInLeft animated">
+          <h4 class="zero">Layout</h4>
+          <p class="small">
+
+            With breakpoint-targeted conditional classes and overrides. (i.e. - <code class="inline">.block-desktop</code>, <code class="inline">.no-border-small-tablet</code>, <code class="inline">.pull-right-small-tablet</code>, <code class="inline">.center-ipad</code>
+          </p>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Display</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="inline">.inline</div>
+                  <div class="inline-block">.inline-block</div>
+                  <div class="block">.block</div>
+                  <div class="hidden">.hidden</div>
+                </div>
+              </div><br>
+              <h4>Border Radius</h4>
+              <div class="demo">
+                <div class="row">
+                  <div>
+                    <button class="square">.square</button>
+                  </div>
+                  <div>
+                    <button class="round">.round</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Floating</h4>
+              <div class="demo">
+                <div class="row">
+                  <div class="pull-none">.pull-none</div>
+                  <div class="pull-right">.pull-right</div>
+                  <div class="pull-left">.pull-left</div>
+                </div>
+              </div><br>
+              <h4>Centering</h4>
+              <div class="demo">
+                <div class="row">
+                  <div>
+                    <button class="center">.center</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Borders</h4>
+              <div class="demo">
+                <div class="bordered">.bordered</div><br>
+                <div class="border-top">.border-top</div><br>
+                <div class="border-right">.border-right</div><br>
+                <div class="border-bottom">.border-bottom</div><br>
+                <div class="border-left">.border-left</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInRight animated">
+          <h4>Typographic</h4>
+          <div class="row">
+            <div class="one third small-tablet padded">
+              <h4>Font Sizing</h4>
+              <p class="zero">.small</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="small">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.medium</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="medium">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.large</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="large">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Text Alignment</h4>
+              <p class="zero">.align-left</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="align-left">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.align-center</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="align-center">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.align-right</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="align-right">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.justify</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="justify">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div>
+            </div>
+            <div class="one third small-tablet padded">
+              <h4>Text Helpers</h4>
+              <p class="zero">.truncate </p>
+              <p class="zero small">(single-line, pure CSS)</p>
+              <div class="demo">
+                <div class="row">
+                  <div class="truncate">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">data-truncate='2' </p>
+              <p class="zero small">(multi-line, powered by truncateLines plugin)</p>
+              <div class="demo">
+                <div class="row">
+                  <div data-truncate="2">The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.</div>
+                </div>
+              </div><br>
+              <p class="zero">.responsive </p>
+              <p class="zero small">(single-line, powered by responsiveText plugin)</p>
+              <div class="demo">
+                <div class="row">
+                  <div data-compression="20.65" class="responsive">The quick brown fox jumped over the lazy dog.</div>
+                </div>
+              </div>
+              <p class="gap-top small">Note: <code class="inline">data-compression='20.65'</code> applied to increase compression</p><br>
+              <p class="zero">.responsive </p>
+              <p class="zero small">(scrollable single-line, powered by responsiveText plugin)</p>
+              <div class="demo">
+                <div class="row">
+                  <div data-scrollable="true" class="responsive">The quick brown fox jumped over the lazy dog.</div>
+                </div>
+              </div>
+              <p class="gap-top small">Note: <code class="inline">data-scrollable='true'</code> applied to enable scrolling on hover</p>
+            </div>
+          </div>
+        </div>
+      </div><br>
+      <hr><br>
+      <div class="row">
+        <div class="one whole padded bounceInUp animated">
+          <h4>Rotation</h4>
+          <div class="row">
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-90"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-90 </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-180"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-180 </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-270"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-270 </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-360"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-360</p>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-90-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-90-ctr  </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-180-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-180-ctr </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-270-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-270-ctr </p>
+            </div>
+            <div class="one fourth small-tablet two-up-mobile double padded align-center">
+              <div class="rotate-360-ctr"><i class="icon-4x icon-power-off"></i></div>
+              <p>.rotate-360-ctr </p>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/home.html.erb b/app/views/groundworkdocs/home.html.erb
new file mode 100644
index 0000000..7c7dcc8
--- /dev/null
+++ b/app/views/groundworkdocs/home.html.erb
@@ -0,0 +1,88 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Responsive Design Made Easy</h1>
+            <p class="quicksand"> </p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Get Started</p>
+            <p><a href="layout_a.html" rel="next" class="green button">View Example Layouts </a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded bounceInLeft animated">
+          <h1 data-compression="22.25" data-min="22" class="quicksand responsive">A Responsive HTML5, CSS<br>and Javascript Framework</h1>
+          <h4>Create scalable, accessible web applications that work on virtually anything.</h4>
+          <div class="row white box">
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-th icon-2x gap-right"></i> Grid System</h4>
+              <p>A highly configurable, nestable, fractions-based, responsive & adaptive, fluid grid layout system</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-tablet icon-2x gap-right"></i> Works Everywhere</h4>
+              <p>Works on virtually everything &mdash; mobile phones, tablets, notebooks, desktops, retina and big screens</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-plus-sign-alt icon-2x gap-right"></i> Highly Accessible</h4>
+              <p>Built with a focus on accessibility, supporting <abbr title="Accessible Rich Internet Applications">ARIA</abbr> state/role and semantic element selectors</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-thumbs-up icon-2x gap-right"></i> Semantic</h4>
+              <p>Supports semantic markup with <abbr title="Accessible Rich Internet Applications">ARIA</abbr> attribute selectors, using Sass' @extend, @mixins, %placeholders & more</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-magic icon-2x gap-right"></i> Built with Sass</h4>
+              <p>Built from the ground up with <a href="http://sass-lang.com/" target="_blank">Sass</a>, the world's most powerful CSS preprocessor</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-cogs icon-2x gap-right"></i> Write Less, Do more</h4>
+              <p>Keep source code free of vendor prefixes. <a href="https://github.com/ai/autoprefixer" target="_blank">Autoprefixer</a> is a CSS postprocessor that keeps code future-friendly</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-edit-sign icon-2x gap-right"></i> Customizable</h4>
+              <p>Easy to customize, and add your own styles and bolt on additional functionality</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-text-width icon-2x gap-right"></i> Responsive Text</h4>
+              <p>Includes the tools you need to create responsive headings, responsive text blocks and responsive tables</p>
+            </div>
+            <div class="three-up two-up-small-tablet padded">
+              <h4 class="zero"><i class="icon-star icon-2x gap-right"></i> Rapid Prototyping</h4>
+              <p>Rapid prototyping and wireframes with dynamic placeholder text, images and fonts</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="pad-top pad-left pad-right bounceInRight animated">
+        <h4 class="zero">Example Layouts and Documentation</h4>
+        <p>Rapid prototypes and usage examples to get you started.</p>
+      </div>
+      <div class="row">
+        <div class="one fourth two-up-small-tablet padded bounceInDown animated"><a href="./layout_a.html">
+            <h5 class="asphalt box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/layout-a.png', :class => "round") %>
+                <div class="small turquoise button">Web Site Layout</div>
+              </div>
+            </h5></a></div>
+        <div class="one fourth two-up-small-tablet padded bounceInLeft animated"><a href="./layout_b.html">
+            <h5 class="yellow box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/layout-b.png', :class => "round") %>
+                <div class="small orange button">Image Gallery</div>
+              </div>
+            </h5></a></div>
+        <div class="one fourth two-up-small-tablet padded bounceInUp animated"><a href="./layout_c.html">
+            <h5 class="pink box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/layout-c.png', :class => "round") %>
+                <div class="small purple button">Ecommerce</div>
+              </div>
+            </h5></a></div>
+        <div class="one fourth two-up-small-tablet padded bounceInRight animated"><a href="./grid.html">
+            <h5 class="green box align-center">
+              <div class="gap-top gap-bottom"><%= image_tag('groundworkcss/example-usage.png', :class => "round") %>
+                <div class="small asphalt button">Usage Examples</div>
+              </div>
+            </h5></a></div>
+      </div>
diff --git a/app/views/groundworkdocs/icons.html.erb b/app/views/groundworkdocs/icons.html.erb
new file mode 100644
index 0000000..d9286ef
--- /dev/null
+++ b/app/views/groundworkdocs/icons.html.erb
@@ -0,0 +1,1428 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Font Awesome Icons</h1>
+            <p class="quicksand"><a href="http://fontawesome.io/" target="_blank">Font Awesome</a> is a beautiful collection of vector icons created & maintained by <a href="http://twitter.com/davegandy" target="_blank">Dave Gandy</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 11 of 14</p>
+            <p><a href="forms.html" rel="prev" class="blue button">Back</a> <a href="responsive_text.html" rel="next" class="green button">Next: Responsive Text</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <h4>Example Usage</h4>
+          <div class="row">
+            <div class="one half">
+              <div class="row">
+                <div class="one third small-tablet pad-left pad-right align-center"><i class="icon-twitter icon-4x"></i></div>
+                <div class="two thirds small-tablet padded">
+                  <pre data-lang="html">&lt;i class=&quot;icon-twitter icon-4x&quot;&gt;&lt;/i&gt;</pre>
+                </div>
+              </div>
+            </div>
+            <div class="one half">
+              <div class="row">
+                <div class="one third small-tablet pad-left pad-right align-center"><i class="icon-spinner icon-spin icon-4x"></i></div>
+                <div class="two thirds small-tablet padded">
+                  <pre data-lang="html">&lt;i class=&quot;icon-spinner icon-spin icon-4x&quot;&gt;&lt;/i&gt;</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <section id="new" class="bounceInLeft animated">
+            <h4>New Icons in 3.2</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-compass"></i> icon-compass</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-collapse"></i> icon-collapse</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-collapse-top"></i> icon-collapse-top</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-expand"></i> icon-expand</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-eur"></i> icon-eur</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-euro"></i> icon-euro<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gbp"></i> icon-gbp</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-usd"></i> icon-usd</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-dollar"></i> icon-dollar<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-inr"></i> icon-inr</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-rupee"></i> icon-rupee<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-jpy"></i> icon-jpy</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-yen"></i> icon-yen<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cny"></i> icon-cny</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-renminbi"></i> icon-renminbi<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-krw"></i> icon-krw</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-won"></i> icon-won<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-btc"></i> icon-btc</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bitcoin"></i> icon-bitcoin<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-file"></i> icon-file</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-file-text"></i> icon-file-text</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-alphabet"></i> icon-sort-by-alphabet</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-alphabet-alt"></i> icon-sort-by-alphabet-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-attributes"></i> icon-sort-by-attributes</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-attributes-alt"></i> icon-sort-by-attributes-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-order"></i> icon-sort-by-order</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-order-alt"></i> icon-sort-by-order-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-thumbs-up"></i> icon-thumbs-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-thumbs-down"></i> icon-thumbs-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-youtube-sign"></i> icon-youtube-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-youtube"></i> icon-youtube</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-xing"></i> icon-xing</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-xing-sign"></i> icon-xing-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-youtube-play"></i> icon-youtube-play</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-dropbox"></i> icon-dropbox</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-stackexchange"></i> icon-stackexchange</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-instagram"></i> icon-instagram</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-flickr"></i> icon-flickr</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-adn"></i> icon-adn</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bitbucket"></i> icon-bitbucket</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bitbucket-sign"></i> icon-bitbucket-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tumblr"></i> icon-tumblr</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tumblr-sign"></i> icon-tumblr-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-down"></i> icon-long-arrow-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-up"></i> icon-long-arrow-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-left"></i> icon-long-arrow-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-right"></i> icon-long-arrow-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-apple"></i> icon-apple</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-windows"></i> icon-windows</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-android"></i> icon-android</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-linux"></i> icon-linux</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-dribbble"></i> icon-dribbble</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-skype"></i> icon-skype</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-foursquare"></i> icon-foursquare</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-trello"></i> icon-trello</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-female"></i> icon-female</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-male"></i> icon-male</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gittip"></i> icon-gittip</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sun"></i> icon-sun</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-moon"></i> icon-moon</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-archive"></i> icon-archive</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bug"></i> icon-bug</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-vk"></i> icon-vk</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-weibo"></i> icon-weibo</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-renren"></i> icon-renren</p>
+              </div>
+            </div>
+          </section>
+          <hr><br>
+          <section id="web-application" class="bounceInRight animated">
+            <h4>Web Application Icons</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-adjust"></i> icon-adjust</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-anchor"></i> icon-anchor</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-archive"></i> icon-archive</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-asterisk"></i> icon-asterisk</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ban-circle"></i> icon-ban-circle</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bar-chart"></i> icon-bar-chart</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-barcode"></i> icon-barcode</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-beaker"></i> icon-beaker</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-beer"></i> icon-beer</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bell"></i> icon-bell</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bell-alt"></i> icon-bell-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bolt"></i> icon-bolt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-book"></i> icon-book</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bookmark"></i> icon-bookmark</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bookmark-empty"></i> icon-bookmark-empty</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-briefcase"></i> icon-briefcase</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bug"></i> icon-bug</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-building"></i> icon-building</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bullhorn"></i> icon-bullhorn</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bullseye"></i> icon-bullseye</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-calendar"></i> icon-calendar</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-calendar-empty"></i> icon-calendar-empty</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-camera"></i> icon-camera</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-camera-retro"></i> icon-camera-retro</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-certificate"></i> icon-certificate</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-check"></i> icon-check</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-check-empty"></i> icon-check-empty</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-check-minus"></i> icon-check-minus</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-check-sign"></i> icon-check-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-circle"></i> icon-circle</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-circle-blank"></i> icon-circle-blank</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cloud"></i> icon-cloud</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cloud-download"></i> icon-cloud-download</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cloud-upload"></i> icon-cloud-upload</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-code"></i> icon-code</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-code-fork"></i> icon-code-fork</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-coffee"></i> icon-coffee</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cog"></i> icon-cog</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cogs"></i> icon-cogs</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-collapse"></i> icon-collapse</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-collapse-alt"></i> icon-collapse-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-collapse-top"></i> icon-collapse-top</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-comment"></i> icon-comment</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-comment-alt"></i> icon-comment-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-comments"></i> icon-comments</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-comments-alt"></i> icon-comments-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-compass"></i> icon-compass</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-credit-card"></i> icon-credit-card</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-crop"></i> icon-crop</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-dashboard"></i> icon-dashboard</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-desktop"></i> icon-desktop</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-download"></i> icon-download</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-download-alt"></i> icon-download-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-edit"></i> icon-edit</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-edit-sign"></i> icon-edit-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ellipsis-horizontal"></i> icon-ellipsis-horizontal</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ellipsis-vertical"></i> icon-ellipsis-vertical</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-envelope"></i> icon-envelope</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-envelope-alt"></i> icon-envelope-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-eraser"></i> icon-eraser</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-exchange"></i> icon-exchange</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-exclamation"></i> icon-exclamation</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-exclamation-sign"></i> icon-exclamation-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-expand"></i> icon-expand</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-expand-alt"></i> icon-expand-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-external-link"></i> icon-external-link</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-external-link-sign"></i> icon-external-link-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-eye-close"></i> icon-eye-close</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-eye-open"></i> icon-eye-open</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-facetime-video"></i> icon-facetime-video</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-female"></i> icon-female</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-fighter-jet"></i> icon-fighter-jet</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-film"></i> icon-film</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-filter"></i> icon-filter</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-fire"></i> icon-fire</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-fire-extinguisher"></i> icon-fire-extinguisher</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-flag"></i> icon-flag</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-flag-alt"></i> icon-flag-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-flag-checkered"></i> icon-flag-checkered</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-folder-close"></i> icon-folder-close</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-folder-close-alt"></i> icon-folder-close-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-folder-open"></i> icon-folder-open</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-folder-open-alt"></i> icon-folder-open-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-food"></i> icon-food</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-frown"></i> icon-frown</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gamepad"></i> icon-gamepad</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gear"></i> icon-gear<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gears"></i> icon-gears<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gift"></i> icon-gift</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-glass"></i> icon-glass</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-globe"></i> icon-globe</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-group"></i> icon-group</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-hdd"></i> icon-hdd</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-headphones"></i> icon-headphones</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-heart"></i> icon-heart</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-heart-empty"></i> icon-heart-empty</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-home"></i> icon-home</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-inbox"></i> icon-inbox</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-info"></i> icon-info</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-info-sign"></i> icon-info-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-key"></i> icon-key</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-keyboard"></i> icon-keyboard</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-laptop"></i> icon-laptop</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-leaf"></i> icon-leaf</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-legal"></i> icon-legal</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-lemon"></i> icon-lemon</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-level-down"></i> icon-level-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-level-up"></i> icon-level-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-lightbulb"></i> icon-lightbulb</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-location-arrow"></i> icon-location-arrow</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-lock"></i> icon-lock</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-magic"></i> icon-magic</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-magnet"></i> icon-magnet</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-mail-forward"></i> icon-mail-forward<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-mail-reply"></i> icon-mail-reply<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-mail-reply-all"></i> icon-mail-reply-all</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-male"></i> icon-male</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-map-marker"></i> icon-map-marker</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-meh"></i> icon-meh</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-microphone"></i> icon-microphone</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-microphone-off"></i> icon-microphone-off</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-minus"></i> icon-minus</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-minus-sign"></i> icon-minus-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-minus-sign-alt"></i> icon-minus-sign-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-mobile-phone"></i> icon-mobile-phone</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-money"></i> icon-money</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-moon"></i> icon-moon</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-move"></i> icon-move</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-music"></i> icon-music</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-off"></i> icon-off</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ok"></i> icon-ok</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ok-circle"></i> icon-ok-circle</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ok-sign"></i> icon-ok-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-pencil"></i> icon-pencil</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-phone"></i> icon-phone</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-phone-sign"></i> icon-phone-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-picture"></i> icon-picture</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-plane"></i> icon-plane</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-plus"></i> icon-plus</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-plus-sign"></i> icon-plus-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-power-off"></i> icon-power-off<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-print"></i> icon-print</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-pushpin"></i> icon-pushpin</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-puzzle-piece"></i> icon-puzzle-piece</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-qrcode"></i> icon-qrcode</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-question"></i> icon-question</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-question-sign"></i> icon-question-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-quote-left"></i> icon-quote-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-quote-right"></i> icon-quote-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-random"></i> icon-random</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-refresh"></i> icon-refresh</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-remove"></i> icon-remove</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-remove-circle"></i> icon-remove-circle</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-remove-sign"></i> icon-remove-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-reorder"></i> icon-reorder</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-reply"></i> icon-reply</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-reply-all"></i> icon-reply-all</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-resize-horizontal"></i> icon-resize-horizontal</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-resize-vertical"></i> icon-resize-vertical</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-retweet"></i> icon-retweet</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-road"></i> icon-road</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-rocket"></i> icon-rocket</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-rss"></i> icon-rss</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-rss-sign"></i> icon-rss-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-screenshot"></i> icon-screenshot</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-search"></i> icon-search</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-share"></i> icon-share</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-share-alt"></i> icon-share-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-share-sign"></i> icon-share-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-shield"></i> icon-shield</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-shopping-cart"></i> icon-shopping-cart</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sign-blank"></i> icon-sign-blank</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-signal"></i> icon-signal</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-signin"></i> icon-signin</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-signout"></i> icon-signout</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sitemap"></i> icon-sitemap</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-smile"></i> icon-smile</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort"></i> icon-sort</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-alphabet"></i> icon-sort-by-alphabet</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-alphabet-alt"></i> icon-sort-by-alphabet-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-attributes"></i> icon-sort-by-attributes</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-attributes-alt"></i> icon-sort-by-attributes-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-order"></i> icon-sort-by-order</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-by-order-alt"></i> icon-sort-by-order-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-down"></i> icon-sort-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sort-up"></i> icon-sort-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-spinner"></i> icon-spinner</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-star"></i> icon-star</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-star-empty"></i> icon-star-empty</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-star-half"></i> icon-star-half</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-star-half-empty"></i> icon-star-half-empty</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-star-half-full"></i> icon-star-half-full<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-subscript"></i> icon-subscript</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-suitcase"></i> icon-suitcase</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-sun"></i> icon-sun</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-superscript"></i> icon-superscript</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tablet"></i> icon-tablet</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tag"></i> icon-tag</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tags"></i> icon-tags</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tasks"></i> icon-tasks</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-terminal"></i> icon-terminal</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-thumbs-down"></i> icon-thumbs-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-thumbs-down-alt"></i> icon-thumbs-down-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-thumbs-up"></i> icon-thumbs-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-thumbs-up-alt"></i> icon-thumbs-up-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ticket"></i> icon-ticket</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-time"></i> icon-time</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tint"></i> icon-tint</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-trash"></i> icon-trash</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-trophy"></i> icon-trophy</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-truck"></i> icon-truck</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-umbrella"></i> icon-umbrella</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-unchecked"></i> icon-unchecked<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-unlock"></i> icon-unlock</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-unlock-alt"></i> icon-unlock-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-upload"></i> icon-upload</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-upload-alt"></i> icon-upload-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-user"></i> icon-user</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-volume-down"></i> icon-volume-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-volume-off"></i> icon-volume-off</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-volume-up"></i> icon-volume-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-warning-sign"></i> icon-warning-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-wrench"></i> icon-wrench</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-zoom-in"></i> icon-zoom-in</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-zoom-out"></i> icon-zoom-out</p>
+              </div>
+            </div>
+          </section>
+          <hr><br>
+          <section id="currency" class="bounceInLeft animated">
+            <h4>Currency Icons</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bitcoin"></i> icon-bitcoin<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-btc"></i> icon-btc</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cny"></i> icon-cny</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-dollar"></i> icon-dollar<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-eur"></i> icon-eur</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-euro"></i> icon-euro<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gbp"></i> icon-gbp</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-inr"></i> icon-inr</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-jpy"></i> icon-jpy</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-krw"></i> icon-krw</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-renminbi"></i> icon-renminbi<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-rupee"></i> icon-rupee<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-usd"></i> icon-usd</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-won"></i> icon-won<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-yen"></i> icon-yen<span class="muted">(alias)</span></p>
+              </div>
+            </div>
+          </section>
+          <hr><br>
+          <section id="text-editor" class="bounceInRight animated">
+            <h4>Text Editor Icons</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-align-center"></i> icon-align-center</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-align-justify"></i> icon-align-justify</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-align-left"></i> icon-align-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-align-right"></i> icon-align-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bold"></i> icon-bold</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-columns"></i> icon-columns</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-copy"></i> icon-copy</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-cut"></i> icon-cut</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-eraser"></i> icon-eraser</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-file"></i> icon-file</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-file-alt"></i> icon-file-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-file-text"></i> icon-file-text</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-file-text-alt"></i> icon-file-text-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-font"></i> icon-font</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-indent-left"></i> icon-indent-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-indent-right"></i> icon-indent-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-italic"></i> icon-italic</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-link"></i> icon-link</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-list"></i> icon-list</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-list-alt"></i> icon-list-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-list-ol"></i> icon-list-ol</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-list-ul"></i> icon-list-ul</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-paper-clip"></i> icon-paper-clip</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-paperclip"></i> icon-paperclip<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-paste"></i> icon-paste</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-repeat"></i> icon-repeat</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-rotate-left"></i> icon-rotate-left<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-rotate-right"></i> icon-rotate-right<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-save"></i> icon-save</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-strikethrough"></i> icon-strikethrough</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-table"></i> icon-table</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-text-height"></i> icon-text-height</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-text-width"></i> icon-text-width</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-th"></i> icon-th</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-th-large"></i> icon-th-large</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-th-list"></i> icon-th-list</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-underline"></i> icon-underline</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-undo"></i> icon-undo</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-unlink"></i> icon-unlink</p>
+              </div>
+            </div>
+          </section>
+          <hr><br>
+          <section id="directional" class="bounceInLeft animated">
+            <h4>Directional Icons</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-angle-down"></i> icon-angle-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-angle-left"></i> icon-angle-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-angle-right"></i> icon-angle-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-angle-up"></i> icon-angle-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-arrow-down"></i> icon-arrow-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-arrow-left"></i> icon-arrow-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-arrow-right"></i> icon-arrow-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-arrow-up"></i> icon-arrow-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-caret-down"></i> icon-caret-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-caret-left"></i> icon-caret-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-caret-right"></i> icon-caret-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-caret-up"></i> icon-caret-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-down"></i> icon-chevron-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-left"></i> icon-chevron-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-right"></i> icon-chevron-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-up"></i> icon-chevron-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-sign-down"></i> icon-chevron-sign-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-sign-left"></i> icon-chevron-sign-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-sign-right"></i> icon-chevron-sign-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-chevron-sign-up"></i> icon-chevron-sign-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-double-angle-down"></i> icon-double-angle-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-double-angle-left"></i> icon-double-angle-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-double-angle-right"></i> icon-double-angle-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-double-angle-up"></i> icon-double-angle-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-hand-down"></i> icon-hand-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-hand-left"></i> icon-hand-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-hand-right"></i> icon-hand-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-hand-up"></i> icon-hand-up</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-down"></i> icon-long-arrow-down</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-left"></i> icon-long-arrow-left</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-right"></i> icon-long-arrow-right</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-long-arrow-up"></i> icon-long-arrow-up</p>
+              </div>
+            </div>
+          </section>
+          <hr><br>
+          <section id="video-player" class="bounceInRight animated">
+            <h4>Video Player Icons</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-backward"></i> icon-backward</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-eject"></i> icon-eject</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-fast-backward"></i> icon-fast-backward</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-fast-forward"></i> icon-fast-forward</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-forward"></i> icon-forward</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-fullscreen"></i> icon-fullscreen</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-pause"></i> icon-pause</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-play"></i> icon-play</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-play-circle"></i> icon-play-circle</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-play-sign"></i> icon-play-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-resize-full"></i> icon-resize-full</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-resize-small"></i> icon-resize-small</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-step-backward"></i> icon-step-backward</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-step-forward"></i> icon-step-forward</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-stop"></i> icon-stop</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-youtube-play"></i> icon-youtube-play</p>
+              </div>
+            </div>
+          </section>
+          <hr><br>
+          <section id="brand" class="bounceInLeft animated">
+            <h4>Brand Icons</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-adn"></i> icon-adn</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-android"></i> icon-android</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-apple"></i> icon-apple</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bitbucket"></i> icon-bitbucket</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bitbucket-sign"></i> icon-bitbucket-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-bitcoin"></i> icon-bitcoin<span class="muted">(alias)</span></p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-btc"></i> icon-btc</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-css3"></i> icon-css3</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-dribbble"></i> icon-dribbble</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-dropbox"></i> icon-dropbox</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-facebook"></i> icon-facebook</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-facebook-sign"></i> icon-facebook-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-flickr"></i> icon-flickr</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-foursquare"></i> icon-foursquare</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-github"></i> icon-github</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-github-alt"></i> icon-github-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-github-sign"></i> icon-github-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-gittip"></i> icon-gittip</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-google-plus"></i> icon-google-plus</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-google-plus-sign"></i> icon-google-plus-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-html5"></i> icon-html5</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-instagram"></i> icon-instagram</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-linkedin"></i> icon-linkedin</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-linkedin-sign"></i> icon-linkedin-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-linux"></i> icon-linux</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-maxcdn"></i> icon-maxcdn</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-pinterest"></i> icon-pinterest</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-pinterest-sign"></i> icon-pinterest-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-renren"></i> icon-renren</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-skype"></i> icon-skype</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-stackexchange"></i> icon-stackexchange</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-trello"></i> icon-trello</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tumblr"></i> icon-tumblr</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-tumblr-sign"></i> icon-tumblr-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-twitter"></i> icon-twitter</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-twitter-sign"></i> icon-twitter-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-vk"></i> icon-vk</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-weibo"></i> icon-weibo</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-windows"></i> icon-windows</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-xing"></i> icon-xing</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-xing-sign"></i> icon-xing-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-youtube"></i> icon-youtube</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-youtube-play"></i> icon-youtube-play</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-youtube-sign"></i> icon-youtube-sign</p>
+              </div>
+            </div>
+          </section>
+          <hr><br>
+          <section id="medical" class="bounceInUp animated">
+            <h4>Medical Icons</h4>
+            <div class="row the-icons">
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-ambulance"></i> icon-ambulance</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-h-sign"></i> icon-h-sign</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-hospital"></i> icon-hospital</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-medkit"></i> icon-medkit</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-stethoscope"></i> icon-stethoscope</p>
+              </div>
+              <div class="one fourth two-up-small-tablet two-up-mobile">
+                <p><i class="icon-user-md"></i> icon-user-md</p>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/layout_a.html.erb b/app/views/groundworkdocs/layout_a.html.erb
new file mode 100644
index 0000000..f756676
--- /dev/null
+++ b/app/views/groundworkdocs/layout_a.html.erb
@@ -0,0 +1,122 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Web Site Layout Example</h1>
+            <p class="quicksand">Demonstrates Typography, Styled Lists, Buttons, Source Reordering, Grid Breakpoint Modifiers and Adapters</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Example Lyaout 1 of 3</p>
+            <p><a href="home.html" rel="prev" class="blue button">Back</a> <a href="layout_b.html" rel="next" class="green button">Next: Image Gallery </a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <article class="row">
+        <section class="two fourths right-one padded bounceInDown animated"><img src="http://placehold.it/750x400/2ecc71/ffffff/&amp;text=Main+Image" alt="">
+          <hr><img src="http://placehold.it/250x130/34495e/ffffff/" alt="" class="pull-left gap-right">
+          <h1>Featured Article</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Nunc vel vehicula ante. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Nunc vel vehicula ante.</p>
+          <p>
+            <button class="asphalt">Read more</button>
+          </p>
+        </section>
+        <aside class="one fourth left-two padded border-right bounceInLeft animated">
+          <h1>Left Sidebar</h1>
+          <div class="row">
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ul class="list">
+                <li>Unordered list item #1</li>
+                <li>Unordered list item #2</li>
+                <li>Unordered list item #3</li>
+                <li>Unordered list item #4</li>
+              </ul>
+            </div>
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ol class="list">
+                <li>Ordered list item #1</li>
+                <li>Ordered list item #2</li>
+                <li>Ordered list item #3</li>
+              </ol>
+            </div>
+          </div>
+          <hr>
+          <h3>Left Sidebar Image Gallery</h3>
+          <div class="row">
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e67e22/ffffff/" alt=""></div>
+          </div>
+          <div class="pad-right pad-left">
+            <p class="align-right">
+              <button class="orange">View more</button>
+            </p>
+          </div>
+        </aside>
+        <aside class="one fourth padded border-left bounceInRight animated">
+          <h1>Right Sidebar</h1>
+          <div class="row">
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ul class="list">
+                <li>Unordered list item #1</li>
+                <li>Unordered list item #2</li>
+                <li>Unordered list item #3</li>
+                <li>Unordered list item #4</li>
+              </ul>
+            </div>
+            <div class="one whole two-up-small-tablet one-up-mobile">
+              <ol class="list">
+                <li>Ordered list item #1</li>
+                <li>Ordered list item #2</li>
+                <li>Ordered list item #3</li>
+              </ol>
+            </div>
+          </div>
+          <hr>
+          <h3>Right Sidebar Image Gallery</h3>
+          <div class="row">
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+            <div class="one half three-up-small-tablet two-up-mobile padded align-center"><img src="http://placehold.it/120x85/e74c3c/ffffff/" alt=""></div>
+          </div>
+          <div class="pad-right pad-left">
+            <p class="align-right">
+              <button class="red">View more</button>
+            </p>
+          </div>
+        </aside>
+      </article>
+      <article class="row bounceInUp animated">
+        <section class="one third padded">
+          <h3>Section Heading 3</h3>
+          <div class="row">
+            <div class="two-up-small-tablet one-up-mobile align-center"><img src="http://placehold.it/380x200/f02475/ffffff/" alt=""></div>
+            <div class="two-up-small-tablet one-up-mobile">
+              <p class="padded no-pad-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
+            </div>
+          </div>
+        </section>
+        <section class="one third padded">
+          <h3>Section Heading 3</h3>
+          <div class="row">
+            <div class="two-up-small-tablet one-up-mobile align-center"><img src="http://placehold.it/380x200/1abc9c/ffffff/" alt=""></div>
+            <div class="two-up-small-tablet one-up-mobile">
+              <p class="padded no-pad-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
+            </div>
+          </div>
+        </section>
+        <section class="one third padded">
+          <h3>Section Heading 3</h3>
+          <div class="row">
+            <div class="two-up-small-tablet one-up-mobile align-center"><img src="http://placehold.it/380x200/34495e/ffffff/" alt=""></div>
+            <div class="two-up-small-tablet one-up-mobile">
+              <p class="padded no-pad-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
+            </div>
+          </div>
+        </section>
+      </article>
diff --git a/app/views/groundworkdocs/layout_b.html.erb b/app/views/groundworkdocs/layout_b.html.erb
new file mode 100644
index 0000000..5c9483c
--- /dev/null
+++ b/app/views/groundworkdocs/layout_b.html.erb
@@ -0,0 +1,37 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Image Gallery Layout Example</h1>
+            <p class="quicksand">Demonstrates Grid Breakpoint Adapters</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Example Layout 2 of 3</p>
+            <p><a href="layout_a.html" rel="prev" class="blue button">Back</a> <a href="layout_c.html" rel="next" class="green button">Next: Ecommerce</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <article class="row">
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInLeft animated"><a href="http://placehold.it/900x500/2ecc71/ffffff/&amp;text=Image+1" title="View Larger Image" class="block green"><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Image+1" alt="Image 1" class="round"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInDownLeft animated"><a href="http://placehold.it/900x500/3498db/ffffff/&amp;text=Image+2" title="View Larger Image" class="block blue"><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Image+2" alt="Image 2"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInDown animated"><a href="http://placehold.it/900x500/9b59b6/ffffff/&amp;text=Image+3" title="View Larger Image" class="block purple"><img src="http://placehold.it/300x300/9b59b6/ffffff/&amp;text=Image+3" alt="Image 3"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInUp animated"><a href="http://placehold.it/900x500/f1c40f/ffffff/&amp;text=Image+4" title="View Larger Image" class="block yellow"><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Image+4" alt="Image 4"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInUpRight animated"><a href="http://placehold.it/900x500/e67e22/ffffff/&amp;text=Image+5" title="View Larger Image" class="block orange"><img src="http://placehold.it/300x300/e67e22/ffffff/&amp;text=Image+5" alt="Image 5"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInRight animated"><a href="http://placehold.it/900x500/e74c3c/ffffff/&amp;text=Image+6" title="View Larger Image" class="block red"><img src="http://placehold.it/300x300/e74c3c/ffffff/&amp;text=Image+6" alt="Image 6"></a></div>
+      </article>
+      <article class="row">
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInLeft animated"><a href="http://placehold.it/900x500/f02475/ffffff/&amp;text=Image+7" title="View Larger Image" class="block pink"><img src="http://placehold.it/300x300/f02475/ffffff/&amp;text=Image+7" alt="Image 7"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInDownLeft animated"><a href="http://placehold.it/900x500/1abc9c/ffffff/&amp;text=Image+8" title="View Larger Image" class="block turquoise"><img src="http://placehold.it/300x300/1abc9c/ffffff/&amp;text=Image+8" alt="Image 8"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInDown animated"><a href="http://placehold.it/900x500/34495e/ffffff/&amp;text=Image+9" title="View Larger Image" class="block asphalt"><img src="http://placehold.it/300x300/34495e/ffffff/&amp;text=Image+9" alt="Image 9"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInUp animated"><a href="http://placehold.it/900x500/2ecc71/ffffff/&amp;text=Image+10" title="View Larger Image" class="block green"><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Image+10" alt="Image 10"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInUpRight animated"><a href="http://placehold.it/900x500/3498db/ffffff/&amp;text=Image+11" title="View Larger Image" class="block blue"><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Image+11" alt="Image 11"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInRight animated"><a href="http://placehold.it/900x500/9b59b6/ffffff/&amp;text=Image+12" title="View Larger Image" class="block purple"><img src="http://placehold.it/300x300/9b59b6/ffffff/&amp;text=Image+12" alt="Image 12"></a></div>
+      </article>
+      <article class="row">
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInLeft animated"><a href="http://placehold.it/900x500/f1c40f/ffffff/&amp;text=Image+13" title="View Larger Image" class="block yellow"><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Image+13" alt="Image 13"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInDownLeft animated"><a href="http://placehold.it/900x500/e67e22/ffffff/&amp;text=Image+14" title="View Larger Image" class="block orange"><img src="http://placehold.it/300x300/e67e22/ffffff/&amp;text=Image+14" alt="Image 14"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInDown animated"><a href="http://placehold.it/900x500/e74c3c/ffffff/&amp;text=Image+15" title="View Larger Image" class="block red"><img src="http://placehold.it/300x300/e74c3c/ffffff/&amp;text=Image+15" alt="Image 15"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInUp animated"><a href="http://placehold.it/900x500/f02475/ffffff/&amp;text=Image+16" title="View Larger Image" class="block pink"><img src="http://placehold.it/300x300/f02475/ffffff/&amp;text=Image+16" alt="Image 16"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded rotateInUpRight animated"><a href="http://placehold.it/900x500/1abc9c/ffffff/&amp;text=Image+17" title="View Larger Image" class="block turquoise"><img src="http://placehold.it/300x300/1abc9c/ffffff/&amp;text=Image+17" alt="Image 17"></a></div>
+        <div class="one sixth three-up-small-tablet two-up-mobile padded bounceInRight animated"><a href="http://placehold.it/900x500/34495e/ffffff/&amp;text=Image+18" title="View Larger Image" class="block asphalt"><img src="http://placehold.it/300x300/34495e/ffffff/&amp;text=Image+18" alt="Image 18"></a></div>
+      </article>
diff --git a/app/views/groundworkdocs/layout_c.html.erb b/app/views/groundworkdocs/layout_c.html.erb
new file mode 100644
index 0000000..7b42760
--- /dev/null
+++ b/app/views/groundworkdocs/layout_c.html.erb
@@ -0,0 +1,116 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Ecommerce Example Layout</h1>
+            <p class="quicksand">Demonstrates Responsive Text, Truncated Lines, Icons, Vertical (To Menu) Navigation, Grid Breakpoint Modifiers and Adapters</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Example Layout 3 of 3</p>
+            <p><a href="layout_b.html" rel="prev" class="blue button">Back</a> <a href="grid.html" rel="next" class="green button">Next: Grid System</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="align-right padded"><a href="#" class="gap-right">My Account <i class="icon-user"></i></a><a href="#" class="gap-right">View Cart <i class="icon-shopping-cart"></i></a><a href="#">Sign Out <i class="icon-signout"></i></a></div>
+      <div class="row">
+        <aside class="one fifth padded bounceInLeft animated">
+          <nav data-label="Shop by Category" class="nav vertical menu">
+            <ul style="display:block;">
+              <li class="one whole"><a>Nav item #1</a></li>
+              <li class="one whole"><a>Nav item #2</a></li>
+              <li class="one whole"><a>Nav item #3</a></li>
+              <li class="one whole"><a>Nav item #4</a></li>
+              <li class="one whole"><a>Nav item #5</a></li>
+            </ul>
+          </nav>
+        </aside>
+        <article class="four fifths">
+          <div class="row">
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInDown animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 1</h4><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Product+1">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInUp animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 2</h4><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Product+2">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded rotateInDownRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 3</h4><img src="http://placehold.it/300x300/9b59b6/ffffff/&amp;text=Product+3">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 4</h4><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Product+4">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInDown animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 5</h4><img src="http://placehold.it/300x300/e67e22/ffffff/&amp;text=Product+5">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInUp animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 6</h4><img src="http://placehold.it/300x300/e74c3c/ffffff/&amp;text=Product+6">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded rotateInDownRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 7</h4><img src="http://placehold.it/300x300/f02475/ffffff/&amp;text=Product+7">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 8</h4><img src="http://placehold.it/300x300/1abc9c/ffffff/&amp;text=Product+8">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInDown animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 9</h4><img src="http://placehold.it/300x300/34495e/ffffff/&amp;text=Product+9">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInUp animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 10</h4><img src="http://placehold.it/300x300/2ecc71/ffffff/&amp;text=Product+10">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded rotateInDownRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 11</h4><img src="http://placehold.it/300x300/3498db/ffffff/&amp;text=Product+11">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+            <div class="one fourth three-up-small-tablet two-up-mobile padded bounceInRight animated">
+              <div class="box">
+                <h4 data-compression="7" data-max="20" class="responsive align-center zero">Product 12</h4><img src="http://placehold.it/300x300/f1c40f/ffffff/&amp;text=Product+12">
+                <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>$8.00 USD<i class="icon-shopping-cart pull-right large"></i></p>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
diff --git a/app/views/groundworkdocs/media_queries.html.erb b/app/views/groundworkdocs/media_queries.html.erb
new file mode 100644
index 0000000..38d41c3
--- /dev/null
+++ b/app/views/groundworkdocs/media_queries.html.erb
@@ -0,0 +1,75 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Media Queries</h1>
+            <p class="quicksand">Restrict CSS rules to targeted browser conditions, such as viewport widths & pixel densities</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Documentation: Media Queries</p>
+            <p><a href="breakpoints.html" class="green button">Also See: Targeted Breakpoints <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Example Media Queries</h4>
+            <div class="row">
+              <div class="one half padded">
+                <p>Mobile</p>
+                <pre data-lang="css">@media (max-width: 480px) {
+  // CSS that only applies to viewports
+  // less than or equal to 480 pixles goes here
+}</pre>
+              </div>
+              <div class="one half padded">
+                <p>Not Mobile</p>
+                <pre data-lang="css">@media (min-width: 481px) {
+  // CSS that only applies to viewports
+  // greater than 480 pixles goes here
+}</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <p>Small Tablet</p>
+                <pre data-lang="css">@media (max-width: 767px) {
+  // CSS that only applies to viewports
+  // less than 768 pixles goes here
+}</pre>
+              </div>
+              <div class="one half padded">
+                <p>iPad</p>
+                <pre data-lang="css">@media (min-width: 768px) and (max-width:1024px) {
+  // CSS that only applies to viewports
+  // of similar size to the ipad goes here
+}</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <p>Desktop</p>
+                <pre data-lang="css">@media (min-width: 1025px) {
+  // CSS that only applies to viewports
+  // greater than 1024 pixles goes here
+}</pre>
+              </div>
+              <div class="one half padded">
+                <p>iPad Retina</p>
+                <pre data-lang="css">@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
+  // CSS that only applies to viewports
+  // of similar size to the ipad and
+  // with double pixel density goes here
+}</pre>
+              </div>
+            </div><br>
+            <hr><br>
+          </div>
+          <div class="bounceInUp animated">
+            <h4>Targeted Breakpoints</h4>
+            <p>Groundwork utilizes Sass variables to introduce <a href="breakpoints.html">logical media queries</a> which can help keep code organized, meaningful, and easier to read. The Sass variable names make targeting common devices and viewport size ranges a more intuitive and more natural step in the optimization process.</p>
+            <p><a href="breakpoints.html" class="green button">Read More <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/messages.html.erb b/app/views/groundworkdocs/messages.html.erb
new file mode 100644
index 0000000..1b306f5
--- /dev/null
+++ b/app/views/groundworkdocs/messages.html.erb
@@ -0,0 +1,92 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Message Boxes</h1>
+            <p class="quicksand">Provide users with feedback or instructions.</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 7 of 14</p>
+            <p><a href="boxes.html" rel="prev" class="blue button">Back</a> <a href="tables.html" rel="next" class="green button">Next: Tables</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="row">
+            <div class="one whole bounceInLeft animated">
+              <div class="pad-top pad-left pad-right">
+                <h4>Message Boxes</h4>
+              </div>
+              <div class="row">
+                <div class="one half pad-left pad-right pad-bottom">
+                  <p class="message">This is an important message.</p>
+                </div>
+                <div class="one half pad-left pad-right pad-bottom">
+                  <p class="dismissible message">This is a dismissible message.</p>
+                </div>
+              </div>
+              <div class="row">
+                <div class="one half pad-left pad-right">
+                  <pre data-lang="html">&lt;p class=&quot;message&quot;&gt;This is an important message.&lt;/p&gt;</pre>
+                </div>
+                <div class="one half pad-left pad-right">
+                  <pre data-lang="html">&lt;p class=&quot;message dismissible&quot;&gt;This is a dismissible message.&lt;/p&gt;</pre>
+                </div>
+              </div>
+            </div>
+          </div><br>
+          <div class="row">
+            <div class="one half padded bounceInUp animated">
+              <h4>States</h4>
+              <p class="info message">This is an info message.</p>
+              <p class="info dismissible message">This is a dismissible info message.</p>
+              <p class="success message">This is a success message.</p>
+              <p class="success dismissible message">This is a dismissible success message.</p>
+              <p class="question message">This is a question message.</p>
+              <p class="question dismissible message">This is a dismissible question message.</p>
+              <p class="alert message">This is an alert message.</p>
+              <p class="alert dismissible message">This is a dismissible alert message.</p>
+              <p class="warning message">This is a warning message.</p>
+              <p class="warning dismissible message">This is a dismissible warning message.</p>
+              <p class="error message">This is an error message.</p>
+              <p class="error dismissible message">This is a dismissible error message.</p><br>
+              <div class="row">
+                <div class="one half small-tablet pad-right no-pad-mobile">
+                  <h4>Square</h4>
+                  <p class="message square">This is a square message.</p>
+                  <p class="message square dismissible">This is a dismissible square message.</p>
+                </div>
+                <div class="one half small-tablet">
+                  <h4>Round</h4>
+                  <p class="message round align-center">This is a round message.</p>
+                  <p class="message round dismissible align-center">This is a dismissible round message.</p>
+                </div>
+              </div>
+            </div>
+            <div class="one half padded bounceInDown animated">
+              <h4>Colors</h4>
+              <p class="yellow message">This is a yellow message.</p>
+              <p class="dismissible yellow message">This is a dismissible yellow message.</p>
+              <p class="orange message">This is a orange message.</p>
+              <p class="dismissible orange message">This is a dismissible orange message.</p>
+              <p class="red message">This is a red message.</p>
+              <p class="dismissible red message">This is a dismissible red message.</p>
+              <p class="pink message">This is a pink message.</p>
+              <p class="dismissible pink message">This is a dismissible pink message.</p>
+              <p class="purple message">This is a purple message.</p>
+              <p class="dismissible purple message">This is a dismissible purple message.</p>
+              <p class="asphalt message">This is a asphalt message.</p>
+              <p class="dismissible asphalt message">This is a dismissible asphalt message.</p>
+              <p class="blue message">This is a blue message.</p>
+              <p class="dismissible blue message">This is a dismissible blue message.</p>
+              <p class="turquoise message">This is a turquoise message.</p>
+              <p class="dismissible turquoise message">This is a dismissible turquoise message.</p>
+              <p class="green message">This is a green message.</p>
+              <p class="dismissible green message">This is a dismissible green message.</p>
+              <p class="charcoal message">This is a charcoal message.</p>
+              <p class="dismissible charcoal message">This is a dismissible charcoal message.</p>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/navigation.html.erb b/app/views/groundworkdocs/navigation.html.erb
new file mode 100644
index 0000000..46093be
--- /dev/null
+++ b/app/views/groundworkdocs/navigation.html.erb
@@ -0,0 +1,690 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Navigation</h1>
+            <p class="quicksand">Responsive navigation created by <a href="http://twitter.com/ghepting" target="_blank">Gary Hepting</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 4 of 14</p>
+            <p><a href="typography.html" rel="prev" class="blue button">Back</a> <a href="buttons.html" rel="next" class="green button">Next: Buttons</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Target Breakpoints</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <h4>iPad</h4>
+                <nav title="iPad Menu" role="navigation" class="nav">
+                  <ul>
+                    <li>
+                      <button>Nav Item 1</button>
+                    </li>
+                    <li>
+                      <button>Nav Menu 1</button>
+                      <ul>
+                        <li>
+                          <button>Menu Item 1</button>
+                        </li>
+                        <li>
+                          <button>Sub Menu 1</button>
+                          <ul>
+                            <li>
+                              <button>Sub Menu Item 1</button>
+                            </li>
+                            <li>
+                              <button>Sub Menu Item 2</button>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <button>Menu Item 2</button>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <button>Nav Item 3</button>
+                    </li>
+                  </ul>
+                </nav><br>
+                <pre data-lang="html">&lt;nav class=&quot;nav&quot; title=&quot;iPad Menu&quot;&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;button&gt;Nav Item 1&lt;/button&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;button&gt;Nav Menu 1&lt;/button&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;button&gt;Menu Item 1&lt;/button&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;button&gt;Sub Menu 1&lt;/button&gt;
+          &lt;ul&gt;
+            &lt;li&gt;&lt;button&gt;Sub Menu Item 1&lt;/button&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;button&gt;Sub Menu Item 2&lt;/button&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+        &lt;li&gt;&lt;button&gt;Menu Item 2&lt;/button&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+    &lt;li&gt;&lt;button&gt;Nav Item 3&lt;/button&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</pre>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole padded">
+                <h4>Small Tablet</h4>
+                <nav title="Small Tablet Menu" role="navigation" class="nav small-tablet">
+                  <ul>
+                    <li>
+                      <button>Nav Item 1</button>
+                    </li>
+                    <li>
+                      <button>Nav Menu 1</button>
+                      <ul>
+                        <li>
+                          <button>Menu Item 1</button>
+                        </li>
+                        <li>
+                          <button>Sub Menu 1</button>
+                          <ul>
+                            <li>
+                              <button>Sub Menu Item 1</button>
+                            </li>
+                            <li>
+                              <button>Sub Menu Item 2</button>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <button>Menu Item 2</button>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <button>Nav Item 3</button>
+                    </li>
+                  </ul>
+                </nav><br>
+                <pre data-lang="html">&lt;nav class=&quot;nav small-tablet&quot; title=&quot;Small Tablet Menu&quot;&gt;...&lt;/nav&gt;</pre>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole padded">
+                <h4>Mobile</h4>
+                <nav title="Mobile Menu" role="navigation" class="nav mobile">
+                  <ul>
+                    <li>
+                      <button>Nav Item 1</button>
+                    </li>
+                    <li>
+                      <button>Nav Menu 1</button>
+                      <ul>
+                        <li>
+                          <button>Menu Item 1</button>
+                        </li>
+                        <li>
+                          <button>Sub Menu 1</button>
+                          <ul>
+                            <li>
+                              <button>Sub Menu Item 1</button>
+                            </li>
+                            <li>
+                              <button>Sub Menu Item 2</button>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <button>Menu Item 2</button>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <button>Nav Item 3</button>
+                    </li>
+                  </ul>
+                </nav><br>
+                <pre data-lang="html">&lt;nav class=&quot;nav mobile&quot; title=&quot;Mobile Menu&quot;&gt;...&lt;/nav&gt;</pre>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole padded">
+                <h4>Vegetarian (No Hamburger)</h4>
+                <nav role="navigation" class="nav nocollapse">
+                  <ul>
+                    <li>
+                      <button>Nav Item 1</button>
+                    </li>
+                    <li>
+                      <button>Nav Menu 1</button>
+                      <ul>
+                        <li>
+                          <button>Menu Item 1</button>
+                        </li>
+                        <li>
+                          <button>Sub Menu 1</button>
+                          <ul>
+                            <li>
+                              <button>Sub Menu Item 1</button>
+                            </li>
+                            <li>
+                              <button>Sub Menu Item 2</button>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <button>Menu Item 2</button>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <button>Nav Item 3</button>
+                    </li>
+                  </ul>
+                </nav><br>
+                <pre data-lang="html">&lt;nav class=&quot;nav nocollapse&quot; title=&quot;Vegetarian Menu&quot;&gt;...&lt;/nav&gt;</pre>
+              </div>
+            </div>
+          </div><br>
+          <h4>Colors</h4>
+          <div class="row">
+            <div class="one half padded">
+              <nav role="navigation" class="nav yellow">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one half padded">
+              <nav role="navigation" class="nav orange">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div class="row gap-top">
+            <div class="one half padded">
+              <nav role="navigation" class="nav red">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one half padded">
+              <nav role="navigation" class="nav pink">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div class="row gap-top">
+            <div class="one half padded">
+              <nav role="navigation" class="nav purple">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one half padded">
+              <nav role="navigation" class="nav asphalt">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div class="row gap-top">
+            <div class="one half padded">
+              <nav role="navigation" class="nav blue">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one half padded">
+              <nav role="navigation" class="nav turquoise">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div class="row gap-top">
+            <div class="one half padded">
+              <nav role="navigation" class="nav green">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <div class="one half padded">
+              <nav role="navigation" class="nav charcoal">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div><br>
+          <hr><br>
+          <h4>Vertical Orientation</h4>
+          <div class="row">
+            <div class="one third padded">
+              <h4>iPad</h4>
+              <nav title="Vertical iPad Menu" role="navigation" class="nav vertical">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav><br>
+              <pre data-lang="html">&lt;nav class=&quot;nav vertical&quot; title=&quot;Vertical iPad Menu&quot;&gt;...&lt;/nav&gt;</pre>
+            </div>
+            <div class="one third padded">
+              <h4>Small Tablet</h4>
+              <nav title="Vertical Small-Tablet Menu" role="navigation" class="nav small-tablet vertical">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav><br>
+              <pre data-lang="html">&lt;nav class=&quot;nav small-tablet vertical&quot; title=&quot;Vertical Small-Tablet Menu&quot;&gt;...&lt;/nav&gt;</pre>
+            </div>
+            <div class="one third padded">
+              <h4>Mobile</h4>
+              <nav title="Vertical Mobile Menu" role="navigation" class="nav mobile vertical">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav><br>
+              <pre data-lang="html">&lt;nav class=&quot;nav mobile vertical&quot; title=&quot;Vertical Mobile Menu&quot;&gt;...&lt;/nav&gt;</pre>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one whole padded">
+              <h4>Vegetarian (No Hamburger)</h4>
+              <nav role="navigation" class="nav nocollapse vertical">
+                <ul>
+                  <li>
+                    <button>Nav Item 1</button>
+                  </li>
+                  <li>
+                    <button>Nav Menu 1</button>
+                    <ul>
+                      <li>
+                        <button>Menu Item 1</button>
+                      </li>
+                      <li>
+                        <button>Sub Menu 1</button>
+                        <ul>
+                          <li>
+                            <button>Sub Menu Item 1</button>
+                          </li>
+                          <li>
+                            <button>Sub Menu Item 2</button>
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <button>Menu Item 2</button>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <button>Nav Item 3</button>
+                  </li>
+                </ul>
+              </nav><br>
+              <pre data-lang="html">&lt;nav class=&quot;nav vertical nocollapse&quot;&gt;...&lt;/nav</pre>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/placeholder_text.html.erb b/app/views/groundworkdocs/placeholder_text.html.erb
new file mode 100644
index 0000000..e89e389
--- /dev/null
+++ b/app/views/groundworkdocs/placeholder_text.html.erb
@@ -0,0 +1,86 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Placeholder Text</h1>
+            <p class="quicksand">Rapid prototyping with dynamic placeholder text and the <a href="https://github.com/christiannaths/Redacted-Font" target="_blank">Redacted</a> placeholder fonts.</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 13 of 14</p>
+            <p><a href="responsive_text.html" rel="prev" class="blue button">Back</a> <a href="animations.html" rel="next" class="green button">Next: Animations</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4 class="zero">Dynamic Placeholder Text</h4>
+            <p class="small zero">Dynamically generated placeholder text</p>
+            <div class="row">
+              <div class="one whole padded">
+                <div class="row">
+                  <div class="one third padded">
+                    <div class="placeholderText"></div>
+                  </div>
+                  <div class="one third padded">
+                    <div data-placeholder-type="words" data-placeholder-amount="100" class="placeholderText"></div>
+                  </div>
+                  <div class="one third padded">
+                    <h1 data-placeholder-type="words" data-placeholder-amount="3" data-placeholder-punctuation="false" data-placeholder-html="false" class="placeholderText"></h1>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="one third pad-left pad-right">
+                    <pre data-lang="html" class="gap-top">&lt;div class=&quot;placeholderText&quot;&gt;&lt;/div&gt;</pre>
+                    <p class="small">Default options (1 paragraph, including HTML paragraph tags and punctuation)</p>
+                  </div>
+                  <div class="one third pad-left pad-right">
+                    <pre data-lang="html" class="gap-top">&lt;div class=&quot;placeholderText&quot;
+     data-placeholder-type=&quot;words&quot;
+     data-placeholder-amount=&quot;100&quot;&gt;
+&lt;/div&gt;</pre>
+                    <p class="small">100 words, including HTML paragraph tags and punctuation</p>
+                  </div>
+                  <div class="one third pad-left pad-right">
+                    <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;placeholderText&quot;
+     data-placeholder-type=&quot;words&quot;
+     data-placeholder-amount=&quot;3&quot;
+     data-placeholder-punctuation=&quot;false&quot;
+     data-placeholder-html=&quot;false&quot;&gt;
+&lt;/h1&gt;</pre>
+                    <p class="small">3 words without HTML paragraph tags or punctuation</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bounceInRight animated"><br>
+            <hr>
+            <h4 class="zero">Redacted Placeholder Fonts</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <div class="row">
+                  <div class="one whole padded">
+                    <p>Redacted</p>
+                    <div data-placeholder-amount="3" class="placeholderText redacted"></div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="one third padded">
+                    <p>Redacted Script</p>
+                    <div data-placeholder-amount="1" class="placeholderText redacted-script"></div>
+                  </div>
+                  <div class="one third padded">
+                    <p>Redacted Script Light</p>
+                    <div data-placeholder-amount="1" class="placeholderText redacted-script-light"></div>
+                  </div>
+                  <div class="one third padded">
+                    <p>Redacted Script Bold</p>
+                    <div data-placeholder-amount="1" class="placeholderText redacted-script-bold"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/responsive_text.html.erb b/app/views/groundworkdocs/responsive_text.html.erb
new file mode 100644
index 0000000..bdb62db
--- /dev/null
+++ b/app/views/groundworkdocs/responsive_text.html.erb
@@ -0,0 +1,90 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Responsive Text</h1>
+            <p class="quicksand">Javascript helpers that make fitting text blocks within responsive designs a breeze. Created by <a href="http://twitter.com/ghepting" target="_blank">Gary Hepting</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 12 of 14</p>
+            <p><a href="icons.html" rel="prev" class="blue button">Back</a> <a href="placeholder_text.html" rel="next" class="green button">Next: Placeholder Content</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <h4 class="zero">Truncated Text Blocks</h4>
+          <p class="small zero">(Resize the viewport and the amount of text that is displayed will be adjusted)</p>
+          <div class="row">
+            <div class="one third padded bounceInLeft animated">
+              <p>Two Lines:</p>
+              <p data-truncate="2" class="yellow box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>
+            <div class="one third padded bounceInDown animated">
+              <p>Three Lines:</p>
+              <p data-truncate="3" class="turquoise box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>
+            <div class="one third padded bounceInRight animated">
+              <p>Five Lines:</p>
+              <div class="blue box">
+                <p data-truncate="5" class="zero">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one third pad-left pad-right bounceInLeft animated">
+              <pre data-lang="html">&lt;p data-truncate=&quot;2&quot;
+   class=&quot;yellow box&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInDown animated">
+              <pre data-lang="html">&lt;p data-truncate=&quot;3&quot;
+   class=&quot;turquoise box&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInRight animated">
+              <pre data-lang="html">&lt;p data-truncate=&quot;5&quot;
+   class=&quot;blue box&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+            </div>
+          </div>
+          <hr><br>
+          <h4 class="zero">Responsive Text</h4>
+          <p class="small zero">(Resize the viewport and these will shrink to fit)</p>
+          <div class="row">
+            <div class="one third padded bounceInLeft animated">
+              <h1 data-compression="8.5" class="green responsive">Responsive Heading</h1>
+            </div>
+            <div class="one third padded bounceInUp animated">
+              <h1 data-compression="11.8" class="purple responsive">Longer Responsive Heading</h1>
+            </div>
+            <div class="one third padded bounceInRight animated">
+              <h1 data-compression="13" data-scrollable="true" class="red responsive bounceInUp animated">Scrolling Responsive Heading with Overflowing Text</h1>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one third pad-left pad-right bounceInLeft animated">
+              <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;responsive&quot;
+    data-compression=&quot;8.5&quot;&gt;
+  Responsive Heading
+&lt;/h1&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInUp animated">
+              <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;responsive&quot;
+    data-compression=&quot;11.8&quot;&gt;
+  Longer Responsive Heading
+&lt;/h1&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInRight animated">
+              <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;responsive&quot;
+    data-compression=&quot;13&quot;
+    data-scrollable=&quot;true&quot;&gt;
+  Scrolling Responsive Heading with Overflowing Text
+&lt;/h1&gt;</pre>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/tables.html.erb b/app/views/groundworkdocs/tables.html.erb
new file mode 100644
index 0000000..25fe809
--- /dev/null
+++ b/app/views/groundworkdocs/tables.html.erb
@@ -0,0 +1,554 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Tables</h1>
+            <p class="quicksand">Clean and easy to customize styling for tabular data.</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 8 of 14</p>
+            <p><a href="messages.html" rel="prev" class="blue button"> Back</a> <a href="tabs.html" rel="next" class="green button">Next: Tabs</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Responsive Data Table</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <table data-max="15" class="responsive">
+                  <thead>
+                    <tr>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                      <td>Footer cell</td>
+                      <td>Footer cell</td>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole pad-left pad-right">
+                <pre data-lang="html">&lt;table class=&quot;responsive&quot; data-max=&quot;15&quot;&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>States</h4>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive info">
+                  <thead>
+                    <tr>
+                      <th>Info Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive success">
+                  <thead>
+                    <tr>
+                      <th>Success Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive alert">
+                  <thead>
+                    <tr>
+                      <th>Alert Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive question">
+                  <thead>
+                    <tr>
+                      <th>Question Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive warning">
+                  <thead>
+                    <tr>
+                      <th>Warning Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive error">
+                  <thead>
+                    <tr>
+                      <th>Error Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInUp animated">
+            <h4>Colors</h4>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive yellow">
+                  <thead>
+                    <tr>
+                      <th>Yellow Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive orange">
+                  <thead>
+                    <tr>
+                      <th>Orange Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive red">
+                  <thead>
+                    <tr>
+                      <th>Red Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive pink">
+                  <thead>
+                    <tr>
+                      <th>Pink Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive purple">
+                  <thead>
+                    <tr>
+                      <th>Purple Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive asphalt">
+                  <thead>
+                    <tr>
+                      <th>Asphalt Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive blue">
+                  <thead>
+                    <tr>
+                      <th>Blue Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive turquoise">
+                  <thead>
+                    <tr>
+                      <th>Turquoise Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive green">
+                  <thead>
+                    <tr>
+                      <th>Green Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/tabs.html.erb b/app/views/groundworkdocs/tabs.html.erb
new file mode 100644
index 0000000..759aed8
--- /dev/null
+++ b/app/views/groundworkdocs/tabs.html.erb
@@ -0,0 +1,216 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Tabs</h1>
+            <p class="quicksand">Accessible, responsive tab panels that collapse into accordions at <a href="breakpoints.html">targeted breakpoints</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 9 of 14</p>
+            <p><a href="tables.html" rel="prev" class="blue button">Back</a> <a href="forms.html" rel="next" class="green button">Next: Forms</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <div class="row">
+              <div class="one whole padded">
+                <div class="tabs ipad">
+                  <ul role="tablist">
+                    <li role="tab" aria-controls="#tab1">Tab 1</li>
+                    <li role="tab" aria-controls="#tab2">Tab 2</li>
+                    <li role="tab" aria-controls="#tab3">Tab 3</li>
+                    <li role="tab" aria-controls="#tab4">Tab 4</li>
+                    <li role="tab" aria-controls="#tab5">Tab 5</li>
+                    <li role="tab" aria-controls="#tab6">Tab 6</li>
+                    <li role="tab" aria-controls="#tab7">Tab 7</li>
+                    <li role="tab" aria-controls="#tab8">Tab 8</li>
+                    <li role="tab" aria-controls="#tab9">Tab 9</li>
+                    <li role="tab" aria-controls="#tab10">Tab 10</li>
+                  </ul>
+                  <div id="tab1" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#f1c40f;">panel 1</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/f1c40f/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab2" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#e67e22;">panel 2</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/e67e22/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab3" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#e74c3c;">panel 3</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/e74c3c/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab4" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#f02475;">panel 4</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/f02475/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab5" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#9b59b6;">panel 5</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/9b59b6/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab6" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#383636;">panel 6</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/383636/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab7" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#34495e;">panel 7</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/34495e/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab8" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#3498db;">panel 8</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/3498db/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab9" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#1abc9c;">panel 9</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/1abc9c/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab10" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#2ecc71;">panel 10</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/2ecc71/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                </div>
+                <pre data-lang="html" class="gap-top">&lt;div class=&quot;tabs ipad&quot;&gt;
+  &lt;ul role=&quot;tablist&quot;&gt;
+    &lt;li role=&quot;tab&quot; aria-controls=&quot;#tab1&quot;&gt;Tab 1&lt;/li&gt;
+    &lt;li role=&quot;tab&quot; aria-controls=&quot;#tab2&quot;&gt;Tab 2&lt;/li&gt;
+    &lt;li role=&quot;tab&quot; aria-controls=&quot;#tab3&quot;&gt;Tab 3&lt;/li&gt;
+    &lt;li role=&quot;tab&quot; aria-controls=&quot;#tab4&quot;&gt;Tab 4&lt;/li&gt;
+    &lt;li role=&quot;tab&quot; aria-controls=&quot;#tab5&quot;&gt;Tab 5&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;div id=&quot;tab1&quot; role=&quot;tabpanel&quot;&gt;
+    &lt;h1&gt;This is the content of tab &lt;span class=&quot;blue&quot;&gt;panel 1&lt;/span&gt;&lt;/h1&gt;
+    &lt;div class=&quot;pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center&quot;&gt;&lt;img src=&quot;http://placehold.it/520x300/3498db/ffffff&quot;&gt;&lt;/div&gt;
+    &lt;p class=&quot;gap-top-small-tablet&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div id=&quot;tab2&quot; role=&quot;tabpanel&quot;&gt;
+    &lt;h1&gt;This is the content of tab &lt;span class=&quot;red&quot;&gt;panel 2&lt;/span&gt;&lt;/h1&gt;
+    &lt;div class=&quot;pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center&quot;&gt;&lt;img src=&quot;http://placehold.it/520x300/e74c3c/ffffff&quot;&gt;&lt;/div&gt;
+    &lt;p class=&quot;gap-top-small-tablet&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div id=&quot;tab3&quot; role=&quot;tabpanel&quot;&gt;
+    &lt;h1&gt;This is the content of tab &lt;span class=&quot;purple&quot;&gt;panel 3&lt;/span&gt;&lt;/h1&gt;
+    &lt;div class=&quot;pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center&quot;&gt;&lt;img src=&quot;http://placehold.it/520x300/9b59b6/ffffff&quot;&gt;&lt;/div&gt;
+    &lt;p class=&quot;gap-top-small-tablet&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div id=&quot;tab4&quot; role=&quot;tabpanel&quot;&gt;
+    &lt;h1&gt;This is the content of tab &lt;span class=&quot;green&quot;&gt;panel 4&lt;/span&gt;&lt;/h1&gt;
+    &lt;div class=&quot;pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center&quot;&gt;&lt;img src=&quot;http://placehold.it/520x300/2ecc71/ffffff&quot;&gt;&lt;/div&gt;
+    &lt;p class=&quot;gap-top-small-tablet&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div id=&quot;tab5&quot; role=&quot;tabpanel&quot;&gt;
+    &lt;h1&gt;This is the content of tab &lt;span class=&quot;orange&quot;&gt;panel 5&lt;/span&gt;&lt;/h1&gt;
+    &lt;div class=&quot;pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center&quot;&gt;&lt;img src=&quot;http://placehold.it/520x300/e67e22/ffffff&quot;&gt;&lt;/div&gt;
+    &lt;p class=&quot;gap-top-small-tablet&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+  &lt;/div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+              </div>
+            </div>
+            <hr><br>
+            <h4>Vertical Tabs</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <div class="tabs vertical ipad">
+                  <ul role="tablist">
+                    <li role="tab" aria-controls="#tab1">Tab 1</li>
+                    <li role="tab" aria-controls="#tab2">Tab 2</li>
+                    <li role="tab" aria-controls="#tab3">Tab 3</li>
+                    <li role="tab" aria-controls="#tab4">Tab 4</li>
+                    <li role="tab" aria-controls="#tab5">Tab 5</li>
+                    <li role="tab" aria-controls="#tab6">Tab 6</li>
+                    <li role="tab" aria-controls="#tab7">Tab 7</li>
+                    <li role="tab" aria-controls="#tab8">Tab 8</li>
+                    <li role="tab" aria-controls="#tab9">Tab 9</li>
+                    <li role="tab" aria-controls="#tab10">Tab 10</li>
+                  </ul>
+                  <div id="tab1" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#f1c40f;">panel 1</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/f1c40f/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab2" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#e67e22;">panel 2</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/e67e22/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab3" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#e74c3c;">panel 3</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/e74c3c/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab4" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#f02475;">panel 4</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/f02475/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab5" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#9b59b6;">panel 5</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/9b59b6/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab6" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#383636;">panel 6</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/383636/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab7" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#34495e;">panel 7</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/34495e/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab8" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#3498db;">panel 8</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/3498db/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab9" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#1abc9c;">panel 9</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/1abc9c/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                  <div id="tab10" role="tabpanel">
+                    <h1>This is the content of tab <span style="display:inline-block;padding:0 0.3em;border-radius:4px;color:#fff;background:#2ecc71;">panel 10</span></h1>
+                    <div class="pull-right pull-none-small-tablet gap-left no-gap-small-tablet align-center"><img src="http://placehold.it/520x300/2ecc71/ffffff"/></div>
+                    <p class="gap-top-small-tablet">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/groundworkdocs/typography.html.erb b/app/views/groundworkdocs/typography.html.erb
new file mode 100644
index 0000000..6ee2b06
--- /dev/null
+++ b/app/views/groundworkdocs/typography.html.erb
@@ -0,0 +1,656 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Typography</h1>
+            <p class="quicksand">Headings, paragraphs, emphasizers, links, lists, web fonts, quotes, code, and colors</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 3 of 14</p>
+            <p><a href="helpers.html" rel="prev" class="blue button">Back</a> <a href="navigation.html" rel="next" class="green button">Next: Navigation</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Headings</h4>
+            <div class="row">
+              <div class="one third padded">
+                <p>Heading 1</p>
+                <h1>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h1>
+              </div>
+              <div class="one third padded">
+                <p>Heading 2</p>
+                <h2>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2>
+              </div>
+              <div class="one third padded">
+                <p>Heading 3</p>
+                <h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h3>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h1&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/h1&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h2&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/h2&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h3&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/h3&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one third padded">
+                <p>Heading 4</p>
+                <h4>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h4>
+              </div>
+              <div class="one third padded">
+                <p>Heading 5</p>
+                <h5>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h5>
+              </div>
+              <div class="one third padded">
+                <p>Heading 6</p>
+                <h6>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h6>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h4&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/h4&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h5&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/h5&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h6&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/h6&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Paragraphs</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4 id="link-types">Semantic Link Types</h4>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="home.html">Normal Hyperlink</a></p>
+                <pre data-lang="html">&lt;a href=&quot;home.html&quot;&gt;Normal Hyperlink&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#link-types">Anchor Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot;&gt;Anchor Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="https://google.com">Secure Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;https://google.com&quot;&gt;Secure Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://google.com" target="_blank">New Window Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://google.com&quot; target=&quot;_blank&quot;&gt;New Window Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="view-source:http://google.com">View Source Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;view-source:http://google.com&quot;&gt;View Source Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="example.gif">Image Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.gif&quot;&gt;Image Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="example.pdf">PDF Document Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.pdf&quot;&gt;PDF Document Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="example.doc">Word Document Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.doc&quot;&gt;Word Document Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="example.txt">Text Document Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.txt&quot;&gt;Text Document Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="example.md">Markdown Document Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.md&quot;&gt;Markdown Document Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="example.zip">ZIP File Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.zip&quot;&gt;ZIP File Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="example.exe">Executable File Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.exe&quot;&gt;Executable File Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="home.html" rel="home">Home Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;home.html&quot; rel=&quot;home&quot;&gt;Home Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#" rel="search">Search Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;search&quot;&gt;Search Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#" rel="author">Author Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;author&quot;&gt;Author Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#" rel="help">Help Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;help&quot;&gt;Help Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="#" rel="tag">Tag Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;tag&quot;&gt;Tag Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#" rel="bookmark">Bookmark Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;bookmark&quot;&gt;Bookmark Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#" rel="prev">Previous Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;prev&quot;&gt;Previous Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#" rel="next">Next Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;next&quot;&gt;Next Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="#" rel="directory">Directory Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;directory&quot;&gt;Directory Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="#" rel="payment">Payment Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;#&quot; rel=&quot;payment&quot;&gt;Payment Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="mailto:user@example.com">Email Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;mailto:user@example.com&quot;&gt;Email Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="tel:5555551212">Telephone Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;tel:5555551212&quot;&gt;Telephone Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="mailto:user@gmail.com">Gmail Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;mailto:user@gmail.com&quot;&gt;Gmail Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="skype:skypeusername">Skype Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;skype:skypeusername&quot;&gt;Skype Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="example.rss">RSS Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;example.rss&quot;&gt;RSS Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://twitter.com">Twitter Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;twitter.com&quot;&gt;Twitter Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="http://facebook.com">Facebook Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;facebook.com&quot;&gt;Facebook Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://tumblr.com">Tumblr Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://tumblr.com&quot;&gt;Tumblr Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://linkedin.com">LinkedIn Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://linkedin.com&quot;&gt;LinkedIn Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://plus.google.com">Google Plus Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://plus.google.com&quot;&gt;Google Plus Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="http://youtube.com">Youtube Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://youtube.com&quot;&gt;Youtube Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://github.com">Github Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://github.com&quot;&gt;Github Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://stackoverflow.com">Stack Overflow Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://stackoverflow.com&quot;&gt;Stack Overflow Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://instagram.com">Instagram Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://instagram.com&quot;&gt;Instagram Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="http://flickr.com">Flickr Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://flickr.com&quot;&gt;Flickr Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://foursquare.com">Foursquare Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://foursquare.com&quot;&gt;Foursquare Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://dribbble.com">Dribbble Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://dribbble.com&quot;&gt;Dribbble Link&lt;/a&gt;</pre>
+              </div>
+              <div class="one fourth padded">
+                <p><a href="http://dropbox.com">Dropbox Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://dropbox.com&quot;&gt;Dropbox Link&lt;/a&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p><a href="http://trello.com">Trello Link</a></p>
+                <pre data-lang="html">&lt;a href=&quot;http://trello.com&quot;&gt;Trello Link&lt;/a&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>Emphasizers & Modifiers</h4>
+            <div class="row">
+              <div class="one fourth padded">
+                <p>Paragraph with <sup>superscript</sup></p>
+              </div>
+              <div class="one fourth padded">
+                <p>Paragraph with <sub>subscript</sub></p>
+              </div>
+              <div class="one fourth padded">
+                <p>Paragraph with <small>small text</small></p>
+              </div>
+              <div class="one fourth padded">
+                <p>Paragraph with
+                  <big>large text</big>
+                </p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;sup&gt;superscript&lt;/sup&gt;&lt;/p&gt;</pre>
+              </div>
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;sub&gt;subscript&lt;/sub&gt;&lt;/p&gt;</pre>
+              </div>
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;small&gt;small text&lt;/small&gt;&lt;/p&gt;</pre>
+              </div>
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;big&gt;large text&lt;/big&gt;&lt;/p&gt;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one fourth padded">
+                <p>Paragraph with <em>emphasized text</em></p>
+              </div>
+              <div class="one fourth padded">
+                <p>Paragraph with <b>bold text</b></p>
+              </div>
+              <div class="one fourth padded">
+                <p>Paragraph with
+                  <del>deleted text</del>
+                </p>
+              </div>
+              <div class="one fourth padded">
+                <p>Paragraph with <abbr title="Abreviated">abbr</abbr> text</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;em&gt;emphasized text&lt;/em&gt;&lt;/p&gt;</pre>
+              </div>
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;b&gt;bold text&lt;/b&gt;&lt;/p&gt;</pre>
+              </div>
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;del&gt;deleted text&lt;/del&gt;&lt;/p&gt;</pre>
+              </div>
+              <div class="one fourth pad-left pad-right">
+                <pre data-lang="html">&lt;p&gt;Paragraph with &lt;abbr title=&quot;Abreviated&quot;&gt;abbr&lt;/abbr&gt; text&lt;/p&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Unordered Lists</h4>
+            <div class="row">
+              <div class="one third padded">
+                <ul class="unstyled">
+                  <li>Unstyled list item 1</li>
+                  <li>Unstyled list item 2</li>
+                </ul>
+              </div>
+              <div class="one third padded">
+                <ul>
+                  <li>Normal list item 1</li>
+                  <li>Normal list item 2</li>
+                </ul>
+              </div>
+              <div class="one third padded">
+                <ul class="list">
+                  <li>Styled list item 1</li>
+                  <li>Styled list item 2</li>
+                </ul>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ul class=&quot;unstyled&quot;&gt;
+  &lt;li&gt;Unstyled list item 1&lt;/li&gt;
+  &lt;li&gt;Unstyled list item 2&lt;/li&gt;
+&lt;/ul&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ul&gt;
+  &lt;li&gt;Normal list item 1&lt;/li&gt;
+  &lt;li&gt;Normal list item 2&lt;/li&gt;
+&lt;/ul&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ul class=&quot;list&quot;&gt;
+  &lt;li&gt;Styled list item 1&lt;/li&gt;
+  &lt;li&gt;Styled list item 2&lt;/li&gt;
+&lt;/ul&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>Ordered Lists</h4>
+            <div class="row">
+              <div class="one third padded">
+                <ol class="unstyled">
+                  <li>Unstyled ordered list item 1</li>
+                  <li>Unstyled ordered list item 2</li>
+                </ol>
+              </div>
+              <div class="one third padded">
+                <ol>
+                  <li>Ordered list item 1</li>
+                  <li>Ordered list item 2</li>
+                </ol>
+              </div>
+              <div class="one third padded">
+                <ol class="list">
+                  <li>Styled ordered list item 1</li>
+                  <li>Styled ordered list item 2</li>
+                </ol>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ol class=&quot;unstyled&quot;&gt;
+  &lt;li&gt;Unstyled ordered list item 1&lt;/li&gt;
+  &lt;li&gt;Unstyled ordered list item 2&lt;/li&gt;
+&lt;/ol&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ol&gt;
+  &lt;li&gt;Ordered list item 1&lt;/li&gt;
+  &lt;li&gt;Ordered list item 2&lt;/li&gt;
+&lt;/ol&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ol class=&quot;list&quot;&gt;
+  &lt;li&gt;Styled ordered list item 1&lt;/li&gt;
+  &lt;li&gt;Styled ordered list item 2&lt;/li&gt;
+&lt;/ol&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Checklists</h4>
+            <div class="row">
+              <div class="one third padded">
+                <p>Normal Checklist</p>
+                <ul class="checklist">
+                  <li>Checklist item</li>
+                  <li aria-checked="true">Completed checklist item</li>
+                  <li>Checklist item</li>
+                  <li>Checklist item</li>
+                </ul>
+              </div>
+              <div class="one third padded">
+                <p>Large, Colored Checklist</p>
+                <ul class="checklist large turquoise">
+                  <li>Checklist item</li>
+                  <li aria-checked="true">Completed checklist item</li>
+                  <li>Checklist item</li>
+                  <li>Checklist item</li>
+                </ul>
+              </div>
+              <div class="one third padded">
+                <p>Individually Colored Checklist Items</p>
+                <ul class="checklist">
+                  <li class="blue">Blue checklist item</li>
+                  <li aria-checked="true" class="red">Completed red checklist item</li>
+                  <li class="purple">Purple checklist item</li>
+                  <li class="turquoise">Turquoise checklist item</li>
+                </ul>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ul class=&quot;checklist&quot;&gt;
+  &lt;li&gt;Checklist item&lt;/li&gt;
+  &lt;li aria-checked=&quot;true&quot;&gt;Completed checklist item&lt;/li&gt;
+  &lt;li&gt;Checklist item&lt;/li&gt;
+  &lt;li&gt;Checklist item&lt;/li&gt;
+&lt;/ul&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ul class=&quot;checklist large turquoise&quot;&gt;
+  &lt;li&gt;Checklist item&lt;/li&gt;
+  &lt;li aria-checked=&quot;true&quot;&gt;Completed checklist item&lt;/li&gt;
+  &lt;li&gt;Checklist item&lt;/li&gt;
+  &lt;li&gt;Checklist item&lt;/li&gt;
+&lt;/ul&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;ul class=&quot;checklist&quot;&gt;
+  &lt;li class=&quot;blue&quot;&gt;Blue checklist item&lt;/li&gt;
+  &lt;li aria-checked=&quot;true&quot; class=&quot;red&quot;&gt;Completed red checklist item&lt;/li&gt;
+  &lt;li class=&quot;purple&quot;&gt;Purple checklist item&lt;/li&gt;
+  &lt;li class=&quot;turquoise&quot;&gt;Turquoise checklist item&lt;/li&gt;
+&lt;/ul&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>Web Fonts</h4>
+            <div class="row">
+              <div class="one third padded">
+                <h1 class="source-sans-pro">Source Sans Pro</h1>
+              </div>
+              <div class="one third padded">
+                <h1 class="museo-slab">Museo Slab</h1>
+              </div>
+              <div class="one third padded">
+                <h1 class="quicksand">Quicksand</h1>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h1 class=&quot;source-sans-pro&quot;&gt;Source Sans Pro&lt;/h1&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h1 class=&quot;museo-slab&quot;&gt;Museo Slab&lt;/h1&gt;</pre>
+              </div>
+              <div class="one third pad-left pad-right">
+                <pre data-lang="html">&lt;h1 class=&quot;quicksand&quot;&gt;Quicksand&lt;/h1&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>Quotations</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <p>This is a sentence with an
+                  <q>inline quote</q> nested within it.
+                </p>
+                <pre data-lang="html">&lt;p&gt;This is a sentence with an &lt;q&gt;inline quote&lt;/q&gt; nested within it.&lt;/p&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Block Quotations & Cites</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <blockquote>A computer once beat me at chess, but it was no match for me at kick boxing.
+                  <cite>Emo Phillips</cite>
+                </blockquote><br>
+                <pre data-lang="html">&lt;blockquote&gt;
+  A computer once beat me at chess, but it was no match for me at kick boxing.
+  &lt;cite&gt;Emo Phillips&lt;/cite&gt;
+&lt;/blockquote&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInLeft animated">
+            <h4>Code Snippets</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <p>This is some text with some <code>inline code</code></p>
+                <pre data-lang="html">&lt;p&gt;This is some text with some &lt;code&gt;inline code&lt;/code&gt;&lt;/p&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>Preformatted Code Blocks</h4>
+            <div class="row">
+              <div class="one whole padded"><code class="block">
+                  <pre>%code {
+  @extend %inline-block, %monospace;
+  &amp;.block {
+    @extend %block;
+  }
+  background: darken($background-color, 10%);
+  padding: 0 0.3em;
+  margin: 0 0.2em;
+  font-weight: normal;
+  line-height: inherit;
+}</pre></code><br>
+                <pre data-lang="html">&lt;code class=&quot;block&quot;&gt;
+  &lt;pre&gt;%code {
+  @extend %inline-block, %monospace;
+  &amp;.block {
+    @extend %block;
+  }
+  background: darken($background-color, 10%);
+  padding: 0 0.3em;
+  margin: 0 0.2em;
+  font-weight: normal;
+  line-height: inherit;
+}&lt;/pre&gt;
+&lt;/code&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInUp animated">
+            <h4>Colors & States</h4>
+            <div class="row">
+              <div class="two eighths padded">
+                <div class="row">
+                  <div class="one mobile half">
+                    <p><span class="yellow">.yellow</span><br><span class="orange">.orange</span><br><span class="red">.red</span><br><span class="pink">.pink</span><br><span class="purple">.purple</span><br><span class="asphalt">.asphalt</span><br><span class="blue">.blue</span><br><span class="turquoise">.turquoise</span><br><span class="green">.green</span><br><span class="charcoal">.charcoal</span></p>
+                  </div>
+                  <div class="one mobile half">
+                    <p><span class="info">.info</span><br><span class="alert">.alert</span><br><span class="warning">.warning</span><br><span class="error">.error</span><br><span class="success">.success</span><br><span class="question">.question</span></p>
+                  </div>
+                </div>
+              </div>
+              <div class="six eighths">
+                <div class="row">
+                  <div class="two fifths padded">
+                    <div class="row">
+                      <div class="one mobile half">
+                        <ul class="list">
+                          <li class="yellow">.yellow list item</li>
+                          <li class="orange">.orange list item</li>
+                          <li class="red">.red list item</li>
+                          <li class="pink">.pink list item</li>
+                          <li class="purple">.purple list item</li>
+                          <li class="asphalt">.asphalt list item</li>
+                          <li class="blue">.blue list item</li>
+                          <li class="turquoise">.turquoise list item</li>
+                          <li class="green">.green list item</li>
+                          <li class="charcoal">.charcoal list item</li>
+                        </ul>
+                      </div>
+                      <div class="one mobile half">
+                        <ul class="list">
+                          <li class="info">.info list item</li>
+                          <li class="alert">.alert list item</li>
+                          <li class="warning">.warning list item</li>
+                          <li class="error">.error list item</li>
+                          <li class="success">.success list item</li>
+                          <li class="question">.question list item</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="three fifths padded">
+                    <div class="row">
+                      <div class="one mobile half">
+                        <ol class="list">
+                          <li class="yellow">.yellow ordered list item</li>
+                          <li class="orange">.orange ordered list item</li>
+                          <li class="red">.red ordered list item</li>
+                          <li class="pink">.pink ordered list item</li>
+                          <li class="purple">.purple ordered list item</li>
+                          <li class="asphalt">.asphalt ordered list item</li>
+                          <li class="blue">.blue ordered list item</li>
+                          <li class="turquoise">.turquoise ordered list item</li>
+                          <li class="green">.green ordered list item</li>
+                          <li class="charcoal">.charcoal ordered list item</li>
+                        </ol>
+                      </div>
+                      <div class="one mobile half">
+                        <ol class="list">
+                          <li class="info">.info ordered list item</li>
+                          <li class="alert">.alert ordered list item</li>
+                          <li class="warning">.warning ordered list item</li>
+                          <li class="error">.error ordered list item</li>
+                          <li class="success">.success ordered list item</li>
+                          <li class="question">.question ordered list item</li>
+                        </ol>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
diff --git a/app/views/layouts/groundworkdocs.html.erb b/app/views/layouts/groundworkdocs.html.erb
new file mode 100644
index 0000000..ca55390
--- /dev/null
+++ b/app/views/layouts/groundworkdocs.html.erb
@@ -0,0 +1,164 @@
+<!DOCTYPE html><!--[if lt IE 7]><html class="no-js ie ie6 lt-ie7 lt-ie8 lt-ie9 lt-ie10"><![endif]-->
+<!--[if IE 7]>   <html class="no-js ie ie7 lt-ie8 lt-ie9 lt-ie10"><![endif]-->
+<!--[if IE 8]>   <html class="no-js ie ie8 lt-ie9 lt-ie10"><![endif]-->
+<!--[if IE 9]>   <html class="no-js ie ie9 lt-ie10"><![endif]-->
+<!--[if gt IE 9]><html class="no-js ie ie10"><![endif]-->
+<!--[if !IE]><!-->
+<html class="no-js"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+    <title>GroundworkCSS 2: Documentation</title>
+    <%= javascript_include_tag("groundworkdocs") %>
+    <!-- framework css --><!--[if !IE]><!-->
+    <%= stylesheet_link_tag("groundworkdocs", media: "all") %><!--<![endif]-->
+    <!--[if gt IE 9]>
+    <%= stylesheet_link_tag("groundworkdocs", media: "all") %><![endif]--><!--[if lte IE 9]>
+    <link type="text/css" rel="stylesheet" href="<%= asset_path('groundworkcss/groundwork-core.css') %>">
+    <link type="text/css" rel="stylesheet" href="<%= asset_path('groundworkcss/groundwork-type.css') %>">
+    <link type="text/css" rel="stylesheet" href="<%= asset_path('groundworkcss/groundwork-ui.css') %>">
+    <link type="text/css" rel="stylesheet" href="<%= asset_path('groundworkcss/groundwork-anim.css') %>"><![endif]--><!--[if IE]>
+    <link type="text/css" rel="stylesheet" href="<%= asset_path('groundworkcss/groundwork-ie.css') %>"><![endif]-->
+    <style type="text/css">
+      .logo {
+        position: relative;
+        top: -0.5em;
+      }
+      .logo a, .logo a:visited {
+        text-decoration: none;
+        color: #2B2B2D;
+      }
+      .logo img {
+        height: 2em;
+        position: relative;
+        top: 0.55em;
+        margin-right: 0.3em;
+      }
+    </style>
+  </head>
+  <body>
+
+    <header class="padded">
+      <div class="container">
+        <div class="row">
+          <div class="one half">
+            <h2 class="logo"><a href="./home.html" target="_parent"><%= image_tag('groundworkcss/groundwork-logo.svg', :alt => "GroundworkCSS") %>GroundworkCSS 2</a></h2>
+          </div>
+          <div class="one half">
+            <p class="small double pad-top no-pad-small-tablet align-right align-left-small-tablet"><a href="https://github.com/groundworkcss/groundwork" target="_parent">Github Project</a> - Version <%= Groundworkcss::VERSION %><br>Created & Maintained by <a href="http://twitter.com/ghepting" target="_blank">Gary Hepting</a></p>
+          </div>
+        </div>
+        <nav role="navigation" class="nav gap-top">
+          <ul role="menubar">
+            <li><a href="./home.html"><i class="icon-home"></i> Home</a></li>
+            <li role="menu" class="menu"><a href="#">Example Layouts</a>
+              <ul>
+                <li><a href="./layout_a.html">Web Page</a></li>
+                <li><a href="./layout_b.html">Image Gallery</a></li>
+                <li><a href="./layout_c.html">Ecommerce Page</a></li>
+              </ul>
+            </li>
+            <li role="menu" class="menu"><a href="#">Documentation</a>
+              <ul>
+                <li><a href="./grid.html" title="Responsive grid system, grid adapters and helpers">Grid</a></li>
+                <li><a href="./helpers.html" title="Layout helpers, spinners and much more">Helpers</a></li>
+                <li><a href="./typography.html" title="Text elements, quotes, code and web fonts">Typography</a></li>
+                <li role="menu" class="menu"><a href="#" title="Navigation, buttons, messages and tables">UI Elements</a>
+                  <ul>
+                    <li><a href="./navigation.html" title="Navigation">Navigation</a></li>
+                    <li><a href="./buttons.html" title="Buttons, button groups, button menus">Buttons</a></li>
+                    <li><a href="./boxes.html" title="Boxes">Boxes</a></li>
+                    <li><a href="./messages.html" title="Message boxes">Message Boxes</a></li>
+                    <li><a href="./tables.html" title="Tables">Tables</a></li>
+                    <li><a href="./tabs.html" title="Tabs">Tabs</a></li>
+                    <li><a href="./forms.html" title="Form elements">Form Elements</a></li>
+                  </ul>
+                </li>
+                <li><a href="./icons.html" title="Icons">Icons</a></li>
+                <li><a href="./responsive_text.html" title="Responsive text and multi-line text block truncation">Responsive Text</a></li>
+                <li><a href="./placeholder_text.html" title="Placeholder text and placeholder fonts for rapid prototyping and wireframes">Placeholder Text</a></li>
+                <li><a href="./animations.html" title="Pure CSS3 Animations">Animations</a></li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <div class="container">
+
+      <%= yield %>
+
+    </div>
+
+    <footer class="gap-top bounceInUp animated">
+      <div class="box square charcoal">
+        <div class="container padded">
+          <div class="row">
+            <div class="one small-tablet fourth padded">
+              <h5 class="green">Example Layouts</h5>
+              <ul class="unstyled">
+                <li><a href="./layout_a.html">Web Page</a></li>
+                <li><a href="./layout_b.html">Image Gallery</a></li>
+                <li><a href="./layout_c.html">Ecommerce Page</a></li>
+              </ul>
+            </div>
+            <div class="three small-tablet fourths padded">
+              <h5 class="blue">Documentation</h5>
+              <ul class="unstyled three-column two-column-mobile">
+                <li><a href="./grid.html" title="Responsive grid system, grid adapters and helpers">Grid</a></li>
+                <li><a href="./helpers.html" title="Layout helpers, spinners and much more">Helpers</a></li>
+                <li><a href="./typography.html" title="Text elements, quotes, code and web fonts">Typography</a></li>
+                <li><a href="./navigation.html" title="Navigation">Navigation</a></li>
+                <li><a href="./buttons.html" title="Buttons, button groups, button menus">Buttons</a></li>
+                <li><a href="./boxes.html" title="Boxes">Boxes</a></li>
+                <li><a href="./messages.html" title="Message boxes">Message Boxes</a></li>
+                <li><a href="./tables.html" title="Tables">Tables</a></li>
+                <li><a href="./tabs.html" title="Tabs">Tabs</a></li>
+                <li><a href="./forms.html" title="Form elements">Form Elements</a></li>
+                <li><a href="./icons.html" title="Icons">Icons</a></li>
+                <li><a href="./responsive_text.html" title="Responsive text and multi-line text block truncation">Responsive Text</a></li>
+                <li><a href="./placeholder_text.html" title="Placeholder text and placeholder fonts for rapid prototyping and wireframes">Placeholder Text</a></li>
+                <li><a href="./animations.html" title="Pure CSS3 Animations">Animations</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="box square">
+        <div class="container padded">
+          <div class="row">
+            <div class="one half padded">
+              <p>GroundworkCSS is <b>100% free</b> and <b>open source</b>. <a href="mailto:groundworkcss@gmail.com">Give a shout out</a> if you have any feedback.</p>
+              <p>Find a bug? Help squash it by <a href="https://github.com/groundworkcss/groundwork/issues" target="_blank">filing an issue</a> on Github.</p>
+            </div>
+            <div class="one half padded">
+              <p class="large padded align-right align-center-small-tablet"><a href="http://twitter.com/groundworkcss" target="_blank" title="@groundworkcss" style="text-decoration:none;" class="large inline gapped"></a><a href="http://github.com/groundworkcss" target="_blank" title="@groundworkcss" style="text-decoration:none;" class="large inline gapped"></a><a href="mailto:groundworkcss@gmail.com" title="groundworkcss@gmail.com" style="text-decoration:none;" class="large inline gapped"></a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <script type="text/javascript">
+      $(document).ready(function() {
+        $('pre[data-lang="html"]').snippet("html", {
+          style: "groundwork",
+          clipboard: "<%= asset_path('groundworkcss/demo/ZeroClipboard.swf') %>"
+        });
+        $('pre[data-lang="css"]').snippet("css", {
+          style: "groundwork",
+          clipboard: "<%= asset_path('groundworkcss/demo/ZeroClipboard.swf') %>"
+        });
+        $('pre[data-lang="scss"]').snippet("scss", {
+          style: "groundwork",
+          clipboard: "<%= asset_path('groundworkcss/demo/ZeroClipboard.swf') %>"
+        });
+        return $('pre[data-lang="js"]').snippet("javascript", {
+          style: "groundwork",
+          clipboard: "<%= asset_path('groundworkcss/demo/ZeroClipboard.swf') %>"
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/config/environments/development.rb b/config/environments/development.rb
index b281992..c59478f 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -14,7 +14,7 @@ Rails.application.configure do
   config.action_controller.perform_caching = false

   # Don't care if the mailer can't send.
-  config.action_mailer.raise_delivery_errors = false
+  #config.action_mailer.raise_delivery_errors = false

   # Print deprecation notices to the Rails logger.
   config.active_support.deprecation = :log
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index d2f4ec3..1acfe87 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -6,3 +6,6 @@ Rails.application.config.assets.version = '1.0'
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
 # Rails.application.config.assets.precompile += %w( search.js )
+
+Rails.application.config.assets.precompile += %w( groundworkdocs.js )
+Rails.application.config.assets.precompile += %w( *.css )
diff --git a/config/routes.rb b/config/routes.rb
index e58fd00..bb9acba 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,7 +1,26 @@
 Rails.application.routes.draw do
+  get 'groundworkdocs/home'
+  get 'groundworkdocs/animations'
+  get 'groundworkdocs/boxes'
+  get 'groundworkdocs/breakpoints'
+  get 'groundworkdocs/buttons'
+  get 'groundworkdocs/forms'
+  get 'groundworkdocs/grid'
+  get 'groundworkdocs/helpers'
+  get 'groundworkdocs/icons'
+  get 'groundworkdocs/layout_a'
+  get 'groundworkdocs/layout_b'
+  get 'groundworkdocs/layout_c'
+  get 'groundworkdocs/media_queries'
+  get 'groundworkdocs/messages'
+  get 'groundworkdocs/navigation'
+  get 'groundworkdocs/placeholder_text'
+  get 'groundworkdocs/responsive_text'
+  get 'groundworkdocs/tables'
+  get 'groundworkdocs/tabs'
+  get 'groundworkdocs/typography'
+
   devise_for :users
-  # The priority is based upon order of creation: first created -> highest priority.
-  # See how all your routes lay out with "rake routes".

   # You can have the root of your site routed with "root"
   root 'home#index'
diff --git a/db/migrate/20141015080333_devise_create_users.rb b/db/migrate/20141015080333_devise_create_users.rb
index cf497c2..3a16d7f 100644
--- a/db/migrate/20141015080333_devise_create_users.rb
+++ b/db/migrate/20141015080333_devise_create_users.rb
@@ -30,7 +30,6 @@ class DeviseCreateUsers < ActiveRecord::Migration
       # t.string   :unlock_token # Only if unlock strategy is :email or :both
       # t.datetime :locked_at

-
       t.timestamps
     end