zurb-foundation 3.2.3 → 3.2.4.rc1

data/scss/foundation/components/modules/_ui.scss

@@ -24,7 +24,7 @@
 
   /* Alerts ---------------------- */
 
-  div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius(3px); text-shadow: 0 -1px rgba(#000,.3); position: relative;
+  div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius($alertBorderRadius); text-shadow: 0 -1px rgba(#000,.3); position: relative;
 
     &.success { background-color: $successColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
     &.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
@@ -62,7 +62,7 @@
 
     &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent $tooltipBackgroundColor transparent; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent; position: absolute; top: -10px; #{$defaultFloat}: 10px; }
     &.tip-override>.nub { border-color: transparent transparent $tooltipBackgroundColor transparent !important; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent !important; top: -10px !important; }
-    &.tip-top>.nub { border-color: $tooltipBackgroundColor transparent transparent transparent; border-color: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent transparent; top: auto; bottom: -10px; }
+    &.tip-top>.nub, &.tip-centered-top>.nub  { border-color: $tooltipBackgroundColor transparent transparent transparent; border-color: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent transparent; top: auto; bottom: -10px; }
 
     &.tip-left, &.tip-right { float: none !important; }
 
@@ -162,6 +162,11 @@
 
   }
 
+  div.pagination-centered { text-align: center; 
+
+    ul > li { float: none; display: inline-block; }
+  }
+
   /* Breadcrums ---------------------- */
 
   ul.breadcrumbs { display: block; background: lighten($secondaryColor, 5%); padding: 6px 10px 7px; border: 1px solid $secondaryColor; @include border-radius(2px); overflow: hidden; margin-#{$defaultFloat}: 0;

data/scss/foundation/mixins/_semantic-grid.scss

@@ -17,9 +17,9 @@
   // Columns mixin, syntax is ($columns, $behavior). Behavior can be 'centered' which centers things or 'collapse' which collapses the gutters. ex @include row(4,[center | collapse])
 
   @mixin column($columns:$columns, $behavior: false) {
-      @if      $behavior == center   { @extend %fl-n; margin: 0 auto !important; @extend %c-base; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: left; width: 100%; }
-    } @else if $behavior == collapse { @extend %fl-l; @extend %c-base; padding: 0; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: left; width: 100%; }
-    } @else                          { @extend %fl-l; @extend %c-base; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: left; width: 100%; } }
+      @if      $behavior == center   { @extend %fl-n; margin-left: auto; margin-right: auto; @extend %c-base; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: none; width: auto; }
+    } @else if $behavior == collapse { @extend %fl-l; @extend %c-base; padding: 0; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: none; width: auto; }
+    } @else                          { @extend %fl-l; @extend %c-base; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: none; width: auto; } }
   }
 
   // Offset Mixin, include after a column mixin to manipulate its grid offset.

data/templates/project/scss/_settings.scss

@@ -112,6 +112,7 @@
 // $topBarSearchWidth: 200px;
 // $topBarBreakPoint: 940px; // Change to 9999px for always mobile layout
 // $topBarNavToggleSize: 8px;
+// $topBarNavToggleColor: #fff;
 
 // UI Settings
 
@@ -122,6 +123,7 @@
 // $progBarPad: 2px;
 // $linkListBottomMargin: 17px -22px;
 // $tableBorderRadius: 3px;
+// $alertBorderRadius: 3px;
 
 // Tooltip Settings
 

data/test/buttons.html

@@ -133,6 +133,7 @@
               <ul>
                 <li><a href="#">Dropdown Item</a></li>
                 <li><a href="#">Another Dropdown Item</a></li>
+                <li><button name="action" onclick="javascript: alert('button clicked')">Button Element</button></li>
                 <li class="divider"></li>
                 <li><a href="#">Last Item</a></li>
               </ul>

data/test/elements.html

@@ -168,7 +168,7 @@
         </div>
         <br>
         <div class="eight columns">
-          <p>The tooltips can be positioned on the <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element. On a small device, the tooltips are full width and bottom aligned.</p>
+          <p>The tooltips can be positioned on the <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element. Centered tips are avaliable in bottom <span class="has-tip tip-centered-bottom" data-width="180" title="I'm a centered tip below the target element.">tip-centered-bottom</span> and in top <span class="has-tip tip-centered-top" data-width="120" title="I'm a centered tip above the target element.">tip-centered-top</span> flavors for an element. On a small device, the tooltips are full width and bottom aligned.</p>
 
           <h3>Custom Options</h3>
           <p>

data/test/grid.html

@@ -54,17 +54,6 @@
       <h3>The Grid</h3>
       <h4 class="subheader">Create powerful multi-device layouts quickly and easily with the 12-column, nestable Foundation 3 grid. If you're familiar with grid systems, you'll feel right at home.</h4>
 
-      <!-- <h4>The Basics</h4>
-      <p>The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.</p>
-
-      <p>What you need to know is that <strong>columns don't have a fixed width.</strong> They can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.</p>
-
-      <hr />
-
-      <h4>Technical Details</h4>
-      <p>The Foundation 3 grid, like everything else in Foundation 3, is built with <code>box-sizing: border-box</code>, a powerful CSS property that tells the browser to consider border and padding as part of the width of an object rather than as an addition. That enables us to construct the grid extremely simply, which is good news for anyone who lamented how difficult it was to modify the Foundation 2 grid.</p>
-      <p>Now, gutters are created simply with padding on the columns. That means columns have simple widths like 25%, or 50%. Adjusting the padding adjusts the gutters, and this can be controlled either through SCSS variables, the download customizer, or through the CSS itself.</p>
- -->
       <br>
 
       <div class="row">

data/test/navigation.html

@@ -30,6 +30,7 @@
         <dd><a href="#side-nav">Side Nav</a></dd>
         <dd><a href="#sub-nav">Sub Nav</a></dd>
         <dd><a href="#pagination">Pagination</a></dd>
+        <dd><a href="#centered-pagination">Centered pagination</a></dd>
       </dl>
     </div>
   </div>
@@ -223,6 +224,27 @@
         </div>
       </div>
 
+      <div class="row">
+        <div class="four columns">
+          <a name="centered-pagination"></a>
+          <h4>Centered pagination</h4>
+          <p>You can also center your pagination by adding <code>.pagination-centered</code> to its outer div.</p>
+        </div>
+        <br>
+        <div class="eight columns">
+          <div class="pagination-centered">
+            <ul class="pagination">
+            <li class="arrow unavailable"><a href="">&laquo;</a></li>
+            <li class="current"><a href="">1</a></li>
+            <li><a href="">2</a></li>
+            <li><a href="">3</a></li>
+            <li><a href="">4</a></li>
+            <li class="unavailable"><a href="">&hellip;</a></li>
+            <li><a href="">12</a></li>
+            <li><a href="">13</a></li>
+            <li class="arrow"><a href="">&raquo;</a></li>
+          </ul>
+        </div>
 		</div>
   </div>
 

data/test/orbit.html

@@ -101,7 +101,8 @@
     $(window).load(function(){
       $("#featured").orbit({
         slideNumber: true,
-        stackOnSmall: true
+        stackOnSmall: true,
+        captions: true
       });
 
       $('#featuredContent').orbit({ fluid: '2x1' });

data/test/scss/_settings.scss

@@ -112,6 +112,7 @@
 // $topBarSearchWidth: 200px;
 // $topBarBreakPoint: 940px; // Change to 9999px for always mobile layout
 // $topBarNavToggleSize: 8px;
+// $topBarNavToggleColor: #fff;
 
 // UI Settings
 
@@ -122,6 +123,7 @@
 // $progBarPad: 2px;
 // $linkListBottomMargin: 17px -22px;
 // $tableBorderRadius: 3px;
+// $alertBorderRadius: 3px;
 
 // Tooltip Settings
 

data/test/topbar-login.html

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8" />
+
+  <!-- Set the viewport width to device width for mobile -->
+  <meta name="viewport" content="width=device-width" />
+
+  <title>Foundation Top Bar Testing</title>
+
+  <!-- Included CSS Files -->
+  <link rel="stylesheet" href="stylesheets/styles.css">
+
+  <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
+
+</head>
+<body>
+
+    <div class="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
+      <nav class="top-bar">
+        <ul>
+          <!-- Title Area -->
+          <li class="name">
+            <h1>
+              <a href="#">
+                <!-- <img src="http://placehold.it/25x25"> -->
+                Top Bar Title
+              </a>
+            </h1>
+          </li>
+          <li class="toggle-topbar"><a href="#"></a></li>
+        </ul>
+
+        <section>
+          <!-- Left Nav Section -->
+          <ul class="left">
+            <li class="divider"></li>
+            <li class="active has-dropdown">
+              <a href="#">Main Item 1</a>
+              <ul class="dropdown">
+                <li><a href="#">Dropdown Option</a></li>
+                <li class="active"><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li class="divider"></li>
+                <li><a href="#">See all &rarr;</a></li>
+              </ul>
+            </li>
+            <li class="divider"></li>
+            <li><a href="#">Main Item 2</a></li>
+            <li class="divider"></li>
+            <li class="has-dropdown">
+              <a href="#">Main Item 3</a>
+              <ul class="dropdown">
+                <li><label>Section Name</label></li>
+                <li class="has-dropdown">
+                  <a href="#" class="">Dropdown Level 1a</a>
+                  <ul class="dropdown">
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li class="has-dropdown"><a href="#">Dropdown Level 3a</a>
+                      <ul class="dropdown">
+                        <li><label>Section Name</label></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                        <li class="divider"></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                      </ul>
+                    </li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                  </ul>
+                </li>
+				        <li class="has-dropdown">
+                  <a href="#" class="">Dropdown Level 1b</a>
+                  <ul class="dropdown">
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li class="has-dropdown"><a href="#">Dropdown Level 3b</a>
+                      <ul class="dropdown">
+                        <li><label>Section Name</label></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                        <li class="divider"></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                      </ul>
+                    </li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                  </ul>
+                </li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li class="divider"></li>
+                <li><label>Section Name</label></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li class="divider"></li>
+                <li><a href="#">See all &rarr;</a></li>
+              </ul>
+            </li>
+            <li class="divider"></li>
+          </ul>
+
+          <!-- Right Nav Section -->
+          <ul class="right">
+            <li class="show-for-large divider"></li>
+
+            <li class="has-dropdown">
+              <a href="#">Main Item 4</a>
+              <ul class="dropdown">
+                <li><label>Section Name</label></li>
+                <li class="has-dropdown">
+                  <a href="#" class="">Has Dropdown, Level 1</a>
+                  <ul class="dropdown">
+                    <li><a href="#">Dropdown Options</a></li>
+                    <li><a href="#">Dropdown Options</a></li>
+                    <li class="has-dropdown">
+                      <a href="#">Has Dropdown, Level 2</a>
+                      <ul class="dropdown test">
+                        <li><a href="#">Subdropdown Option</a></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                        <li><a href="#">Subdropdown Option</a></li>
+                      </ul>
+                    </li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Subdropdown Option</a></li>
+                  </ul>
+                </li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li class="divider"></li>
+                <li><label>Section Name</label></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Dropdown Option</a></li>
+                <li class="divider"></li>
+                <li><a href="#">See all &rarr;</a></li>
+              </ul>
+            </li>
+            <li class="divider"></li>
+            <li class="login">
+              <form>
+                <input type="text" placeholder="User Name">
+                <input type="password" placeholder="Password">
+                <input type="submit" class="small button" value="Log In">
+              </form>
+            </li>
+            <li class="divider show-for-small"></li>
+
+          </ul>
+        </section>
+      </nav>
+    </div>
+
+  <div class="row">
+    <div class="twelve columns">
+      <p><a href="index.html">&laquo; Back</a></p>
+      <h2>Foundation Top Bar Testing</h2>
+      <hr>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="twelve columns">
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+    </div>
+  </div>
+
+  <!-- Included JS Files -->
+  <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.topbar.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/app.js"></script>
+  <script type="text/javascript">
+    // Page-Specific JavaScript Goes Here
+  </script>
+</body>
+</html>

data/test/topbar.html

@@ -18,14 +18,31 @@
 </head>
 <body>
 
-    <div class="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
+  <div class="row">
+    <div class="twelve columns">
+
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="twelve columns">
+      <p><a href="index.html">&laquo; Back</a></p>
+      <h2>Foundation Top Bar Testing</h2>
+      <hr>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="twelve columns">
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+
+      <div class="contain-to-grid sticky">
       <nav class="top-bar">
         <ul>
           <!-- Title Area -->
           <li class="name">
             <h1>
               <a href="#">
-                <!-- <img src="http://placehold.it/25x25"> -->
                 Top Bar Title
               </a>
             </h1>
@@ -36,101 +53,51 @@
         <section>
           <!-- Left Nav Section -->
           <ul class="left">
-            <li class="divider"></li>
-            <li class="active has-dropdown">
-              <a href="#">Main Item 1</a>
-              <ul class="dropdown">
-                <li><a href="#">Dropdown Option</a></li>
-                <li class="active"><a href="#">Dropdown Option</a></li>
-                <li><a href="#">Dropdown Option</a></li>
-                <li class="divider"></li>
-                <li><a href="#">See all &rarr;</a></li>
-              </ul>
-            </li>
-            <li class="divider"></li>
-            <li><a href="#">Main Item 2</a></li>
             <li class="divider"></li>
             <li class="has-dropdown">
-              <a href="#">Main Item 3</a>
+              <a class="active" href="#">Item 1</a>
               <ul class="dropdown">
                 <li><label>Section Name</label></li>
                 <li class="has-dropdown">
-                  <a href="#" class="">Dropdown Level 1a</a>
-                  <ul class="dropdown">
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li class="has-dropdown"><a href="#">Dropdown Level 3a</a>
-                      <ul class="dropdown">
-                        <li><label>Section Name</label></li>
-                        <li><a href="#">Subdropdown Option</a></li>
-                        <li><a href="#">Subdropdown Option</a></li>
-                        <li class="divider"></li>
-                        <li><a href="#">Subdropdown Option</a></li>
-                      </ul>
-                    </li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                  </ul>
-                </li>
-				        <li class="has-dropdown">
-                  <a href="#" class="">Dropdown Level 1b</a>
+                  <a href="#" class="">Level 1, Has Dropdown</a>
                   <ul class="dropdown">
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li class="has-dropdown"><a href="#">Dropdown Level 3b</a>
+                    <li><a href="#">Level 2</a></li>
+                    <li><a href="#">Level 2</a></li>
+                    <li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
                       <ul class="dropdown">
-                        <li><label>Section Name</label></li>
-                        <li><a href="#">Subdropdown Option</a></li>
-                        <li><a href="#">Subdropdown Option</a></li>
+                        <li><label>Section</label></li>
+                        <li><a href="#">Level 3</a></li>
+                        <li><a href="#">Level 3</a></li>
                         <li class="divider"></li>
-                        <li><a href="#">Subdropdown Option</a></li>
+                        <li><a href="#">Level 3</a></li>
                       </ul>
                     </li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
+                    <li><a href="#">Level 2</a></li>
+                    <li><a href="#">Level 2</a></li>
                   </ul>
                 </li>
-                <li><a href="#">Dropdown Option</a></li>
-                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Level 1</a></li>
+                <li><a href="#">Level 1</a></li>
                 <li class="divider"></li>
                 <li><label>Section Name</label></li>
-                <li><a href="#">Dropdown Option</a></li>
-                <li><a href="#">Dropdown Option</a></li>
-                <li><a href="#">Dropdown Option</a></li>
+                <li><a href="#">Level 1</a></li>
+                <li><a href="#">Level 1</a></li>
+                <li><a href="#">Level 1</a></li>
                 <li class="divider"></li>
                 <li><a href="#">See all &rarr;</a></li>
               </ul>
             </li>
-            <li class="divider"></li>
+            <li class="divider hide-for-small"></li>
           </ul>
 
           <!-- Right Nav Section -->
           <ul class="right">
-            <li class="show-for-large divider"></li>
+            <li class="divider show-for-medium-and-up"></li>
             <li class="has-dropdown">
-              <a href="#">Main Item 4</a>
+              <a href="#">Item 2</a>
               <ul class="dropdown">
                 <li><label>Section Name</label></li>
-                <li class="has-dropdown">
-                  <a href="#" class="">Has Dropdown, Level 1</a>
-                  <ul class="dropdown">
-                    <li><a href="#">Dropdown Options</a></li>
-                    <li><a href="#">Dropdown Options</a></li>
-                    <li class="has-dropdown">
-                      <a href="#">Has Dropdown, Level 2</a>
-                      <ul class="dropdown test">
-                        <li><a href="#">Subdropdown Option</a></li>
-                        <li><a href="#">Subdropdown Option</a></li>
-                        <li><a href="#">Subdropdown Option</a></li>
-                      </ul>
-                    </li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                    <li><a href="#">Subdropdown Option</a></li>
-                  </ul>
-                </li>
+                <li><a href="#" class="">Level 1</a></li>
                 <li><a href="#">Dropdown Option</a></li>
                 <li><a href="#">Dropdown Option</a></li>
                 <li class="divider"></li>
@@ -142,33 +109,21 @@
                 <li><a href="#">See all &rarr;</a></li>
               </ul>
             </li>
-            <li class="divider"></li>
-            <li class="search">
-              <!-- <form class="collapse">
-                <input type="text">
-                <button type="submit" class="secondary radius button">Search</button>
-              </form> -->
-              <form>
-                  <input type="search">
-              </form>
-            </li>
-            <li class="divider show-for-small"></li>
-            <li class="has-button"><a class="small button" href="#">Button!</a></li>
           </ul>
         </section>
       </nav>
     </div>
-
-  <div class="row">
-    <div class="twelve columns">
-      <p><a href="index.html">&laquo; Back</a></p>
-      <h2>Foundation Top Bar Testing</h2>
-      <hr>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="twelve columns">
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      v
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      v
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
+      <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
       <h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
     </div>
   </div>