zurb-foundation 4.0.3 → 4.0.4

data/docs/components/buttons.html.erb

@@ -66,7 +66,7 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/buttons";

data/docs/components/clearing.html.erb

@@ -15,11 +15,11 @@
       <div class="large-12 columns">
 
         <ul class="clearing-thumbs" data-clearing>
-          <li><a class="th" href="../img/demos/demo1.png"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="../img/demos/demo1-th.png"></a></li>
-          <li><a class="th" href="../img/demos/demo2.png"><img src="../img/demos/demo2-th.png"></a></li>
-          <li><a class="th" href="../img/demos/demo3.png"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="../img/demos/demo3-th.png"></a></li>
-          <li><a class="th" href="../img/demos/demo4.png"><img src="../img/demos/demo4-th.png"></a></li>
-          <li><a class="th" href="../img/demos/demo5.png"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="../img/demos/demo5-th.png"></a></li>
+          <li><a class="th" href="../img/demos/demo1.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="../img/demos/demo1-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo3.jpg"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="../img/demos/demo3-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo4.jpg"><img src="../img/demos/demo4-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo5.jpg"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="../img/demos/demo5-th.jpg"></a></li>
         </ul>
 
       </div>
@@ -64,9 +64,9 @@
         <div class="row">
           <div class="large-12 columns">
             <ul class="clearing-thumbs" data-clearing>
-              <li class="clearing-feature"><a class="th" href="../img/demos/demo1.png"><img src="../img/demos/demo1-th.png"></a></li>
-              <li><a class="th" href="../img/demos/demo2.png"><img src="../img/demos/demo2-th.png"></a></li>
-              <li><a class="th" href="../img/demos/demo3.png"><img src="../img/demos/demo3-th.png"></a></li>
+              <li class="clearing-feature"><a class="th" href="../img/demos/demo1.jpg"><img src="../img/demos/demo1-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo3.jpg"><img src="../img/demos/demo3-th.jpg"></a></li>
             </ul>
           </div>
         </div>
@@ -86,9 +86,9 @@
         <div class="row">
           <div class="large-12 columns">
             <ul class="clearing-thumbs" data-clearing>
-              <li><a class="th" href="../img/demos/demo1.png"><img data-caption="caption here..." src="../img/demos/demo1-th.png"></a></li>
-              <li><a class="th" href="../img/demos/demo2.png"><img data-caption="caption 2 here..." src="../img/demos/demo2-th.png"></a></li>
-              <li><a class="th" href="../img/demos/demo3.png"><img data-caption="caption 3 here..." src="../img/demos/demo3-th.png"></a></li>
+              <li><a class="th" href="../img/demos/demo1.jpg"><img data-caption="caption here..." src="../img/demos/demo1-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo2.jpg"><img data-caption="caption 2 here..." src="../img/demos/demo2-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo3.jpg"><img data-caption="caption 3 here..." src="../img/demos/demo3-th.jpg"></a></li>
             </ul>
           </div>
         </div>
@@ -134,14 +134,12 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
 
         <p>Clearing options can only be passed in during initialization at this time.</p>
 
-    <%= code_example "
+<%= code_example "
 {
   // specify the classes or IDs will close clearing when clicked.
   close_selectors : '.clearing-close'
 }", :json %>
 
-
-
       </div>
     </div>
 

data/docs/components/custom-forms.html.erb

@@ -124,7 +124,7 @@
 </form>', :html %>
 
         <form class="custom">
-          <label for="customDropdown2">Medium Example</label>
+          <label for="customDropdown2">Default Example</label>
           <select id="customDropdown2">
             <option DISABLED>This is a dropdown</option>
             <option>This is another option</option>
@@ -228,7 +228,7 @@
       </select>
     </div>
     <div class="small-4 columns">
-      <a href="#" class="button postfix expand">Button</a>
+      <a href="#" class="button postfix">Button</a>
     </div>
   </div>
 </form>', :html %>
@@ -273,7 +273,7 @@
               </select>
             </div>
             <div class="small-4 columns">
-              <a href="#" class="button postfix expand">Button</a>
+              <a href="#" class="button postfix">Button</a>
             </div>
           </div>
         </form>

data/docs/components/dropdown-buttons.html.erb

@@ -54,7 +54,7 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_dropdown-buttons.scss">_dropdown-buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_dropdown-buttons.scss">_dropdown-buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/buttons", "foundation/dropdown-buttons";

data/docs/components/dropdown.html.erb

@@ -57,7 +57,7 @@
         <hr>
 
         <h3>Build With Our Mixins</h3>
-        <p>We've included SCSS mixins used to style dropdowns. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_dropdown.scss">_dropdown.scss</a> from Github and throw them into a foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style dropdowns. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_dropdown.scss">_dropdown.scss</a> from Github and throw them into a foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/dropdown";
@@ -174,7 +174,7 @@ $f-dropdown-list-hover-bg:        #eeeeee;', :css %>
 <div id="contentDrop" class="f-dropdown content medium" data-dropdown-content>
   <h4>Title</h4>
   <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
-  <img src="../img/demos/demo1.png">
+  <img src="../img/demos/demo1.jpg">
   <p>More test.</p>
   <a href="#" class="button">Button</a>
 </div>

data/docs/components/flex-video.html.erb

@@ -52,7 +52,7 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_flex-video.scss">_flex-video.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_flex-video.scss">_flex-video.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/flex-video";

data/docs/components/forms.html.erb

@@ -9,7 +9,7 @@
         <h2><%= @page_title %></h2>
         <h4 class="subheader">With Foundation, we set out to create an easy to handle, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything.</h4>
 
-        <form>
+        <form class="custom">
           <fieldset>
             <legend>Fieldset</legend>
 
@@ -329,10 +329,11 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>A lot of elements in Foundation can be created using SCSS mixins so that you can include your own classes and just enough style as needed for the job at hand. To use these mixins, you'll need to have the extension installed or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_forms.scss">_forms.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+       <p>A lot of elements in Foundation can be created using SCSS mixins so that you can include your own classes and just enough style as needed for the job at hand. To use these mixins, you'll need to have the extension installed or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_forms.scss">_forms.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
-@import "foundation/foundation-global", "foundation/forms";', :css %>
+@import "foundation/foundation-global", "foundation/buttons", "foundation/forms";', :css %>
+
 
         <p>We include most of the form styles by default, but the ones that are attached to HTML classes can be accessed via the mixins below. The error states have mixins, but we suggest using the classes since they are usually only visible temporarily.</p>
 

data/docs/components/grid.html.erb

@@ -249,7 +249,7 @@
         <hr>
 
         <h4>Small Grid</h4>
-        <p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_foundation-global.scss</a> and <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_grid.scss</a> from Github and throw them into a Foundation folder in your project directory.</p>
+        <p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_grid.scss</a> from Github and throw them into a Foundation folder in your project directory.</p>
 
 <%= code_example '
 <div class="row">
@@ -355,7 +355,7 @@ $total-columns: 12 !default;
         <hr>
 
         <h4>Get Advanced With Media Query Changes</h4>
-        <p>We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, <a href="sass.html">we've got variables for that</a>.</p>
+        <p>We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, <a href="../sass.html">we've got variables for that</a>.</p>
 
       </div>
     </div>

data/docs/components/inline-lists.html.erb

@@ -41,7 +41,7 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_inline-lists.scss">_inline-lists.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_inline-lists.scss">_inline-lists.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/inline-lists";

data/docs/components/keystrokes.html.erb

@@ -28,7 +28,7 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style keystrokes. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_keystrokes.scss">_keystrokes.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style keystrokes. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_keystrokes.scss">_keystrokes.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/keystrokes";

data/docs/components/labels.html.erb

@@ -43,7 +43,7 @@
         <hr>
 
         <h3>Build With Our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_labels.scss">_labels.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_labels.scss">_labels.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/labels";

data/docs/components/orbit.html.erb

@@ -11,19 +11,19 @@
 
         <ul id="featured1" data-orbit>
           <li>
-            <img src="../img/demos/demo1.png" />
+            <img src="../img/demos/demo1.jpg" />
             <div class="orbit-caption">
               Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
             </div>
           </li>
           <li>
-            <img src="../img/demos/demo2.png" />
+            <img src="../img/demos/demo2.jpg" />
             <div class="orbit-caption">
               Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
             </div>
           </li>
           <li>
-            <img src="../img/demos/demo3.png" />
+            <img src="../img/demos/demo3.jpg" />
             <div class="orbit-caption">
               Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
             </div>
@@ -45,15 +45,15 @@
 <!-- Basic orbit markup -->
 <ul data-orbit>
   <li>
-    <img src="../img/demos/demo1.png" />
+    <img src="../img/demos/demo1.jpg" />
     <div class="orbit-caption">...</div>
   </li>
   <li>
-    <img src="../img/demos/demo2.png" />
+    <img src="../img/demos/demo2.jpg" />
     <div class="orbit-caption">...</div>
   </li>
   <li>
-    <img src="../img/demos/demo3.png" />
+    <img src="../img/demos/demo3.jpg" />
     <div class="orbit-caption">...</div>
   </li>
 </ul>', :html %>
@@ -66,23 +66,23 @@
 <div class="orbit-container">
   <ul data-orbit="" class="orbit-slides-container">
     <li>
-      <img src="../img/demos/demo3.png">
+      <img src="../img/demos/demo3.jpg">
       <div class="orbit-caption">...</div>
     </li>
     <li class="active">
-      <img src="../img/demos/demo1.png">
+      <img src="../img/demos/demo1.jpg">
       <div class="orbit-caption">...</div>
     </li>
     <li>
-      <img src="../img/demos/demo2.png">
+      <img src="../img/demos/demo2.jpg">
       <div class="orbit-caption">...</div>
     </li>
     <li>
-      <img src="../img/demos/demo3.png">
+      <img src="../img/demos/demo3.jpg">
       <div class="orbit-caption">...</div>
     </li>
     <li>
-      <img src="../img/demos/demo1.png">
+      <img src="../img/demos/demo1.jpg">
       <div class="orbit-caption">...</div>
     </li>
   </ul>

data/docs/components/pagination.html.erb

@@ -88,7 +88,7 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pagination.scss">_pagination.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pagination.scss">_pagination.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/pagination";

data/docs/components/panels.html.erb

@@ -52,7 +52,7 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style panels so that you can code smarter. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_panels.scss">_panels.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style panels so that you can code smarter. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_panels.scss">_panels.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/panels";

data/docs/components/pricing-tables.html.erb

@@ -58,7 +58,7 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style pricing tables so that you can code how you want to. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pricing-tables.scss">_pricing-tables.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style pricing tables so that you can code how you want to. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pricing-tables.scss">_pricing-tables.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/pricing-tables";

data/docs/components/progress-bars.html.erb

@@ -46,7 +46,7 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style progress bars. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_progress-bars.scss">_progress-bars.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style progress bars. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_progress-bars.scss">_progress-bars.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/labels";

data/docs/components/reveal.html.erb

@@ -48,6 +48,14 @@
     <%= code_example '
 <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>', :html %>
 
+        <p>You can also open and close Reveal via JavaScript:</p>
+
+<%= code_example "
+// trigger by event
+$('a.reveal-link').trigger('click');
+$('a.close-reveal-modal').trigger('click');
+", :js %>
+
         <hr>
 
         <h5>Default SCSS Variables</h5>

data/docs/components/section.html.erb

@@ -13,7 +13,7 @@
           <div class="large-3 columns">
             <div class="section-container vertical-nav" data-section data-options="deep_linking: false">
               <section class="section">
-                <p class="title"><a href="#panel1">Section 1</a></p>
+                <p class="title"><a href="#">Section 1</a></p>
                 <div class="content">
                   <ul class="side-nav">
                     <li><a href="#">Link 1</a></li>
@@ -25,7 +25,7 @@
                 </div>
               </section>
               <section class="section">
-                <p class="title"><a href="#panel2">Section 2</a></p>
+                <p class="title"><a href="#">Section 2</a></p>
                 <div class="content">
                   <ul class="side-nav">
                     <li><a href="#">Link 1</a></li>
@@ -47,11 +47,37 @@
                 </div>
               </section>
               <section class="section">
-                <p class="title"><a href="#panel2">Section 2 Section 2</a></p>
+                <p class="title"><a href="#panel2">Section 2</a></p>
                 <div class="content" data-slug="panel2">
                   <p>Section 2. 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.</p>
                 </div>
               </section>
+              <div class="section">
+                <p class="title"><a href="#panel3">Section 3</a></p>
+                <div class="content" data-slug="panel3">
+                  <form>
+                    <div class="row collapse">
+                      <div class="large-2 columns">
+                        <label class="inline">Your Name</label>
+                      </div>
+                      <div class="large-10 columns">
+                        <input type="text" id="yourName" placeholder="Jane Smith">
+                      </div>
+                    </div>
+                    <div class="row collapse">
+                      <div class="large-2 columns">
+                        <label class="inline"> Your Email</label>
+                      </div>
+                      <div class="large-10 columns">
+                        <input type="text" id="yourEmail" placeholder="jane@smithco.com">
+                      </div>
+                    </div>
+                    <label>What's up?</label>
+                    <textarea rows="4"></textarea>
+                    <button type="submit" class="radius button">Submit</button>
+                  </form>
+                </div>
+              </div>
             </div>
           </div>
         </div>

data/docs/components/side-nav.html.erb

@@ -53,7 +53,7 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style side nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_side-nav.scss">_side-nav.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style side nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_side-nav.scss">_side-nav.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/side-nav";

data/docs/components/split-buttons.html.erb

@@ -53,7 +53,7 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="#https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_split-buttons.scss">_split-buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="#https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_split-buttons.scss">_split-buttons.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/buttons", "foundation/split-buttons";

data/docs/components/sub-nav.html.erb

@@ -47,7 +47,7 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style sub-nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_sub-nav.scss">_sub-nav.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style sub-nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_sub-nav.scss">_sub-nav.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/sub-nav";

data/docs/components/switch.html.erb

@@ -97,7 +97,7 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style switches. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_switch.scss">_switch.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style switches. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_switch.scss">_switch.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/switch";

data/docs/components/thumbnails.html.erb

@@ -14,7 +14,7 @@
     <div class="row">
       <div class="large-12 columns">
 
-        <a class="th" href="../img/demos/demo1.png"><img src="../img/demos/demo1-th.png"></a>
+        <a class="th" href="../img/demos/demo1.jpg"><img src="../img/demos/demo1-th.jpg"></a>
 
         <hr>
 
@@ -26,12 +26,12 @@
 <img src="../img/demos/demo2-th.png">
 </a>', :html %>
 
-        <a class="th radius" href="../img/demos/demo2.png"><img src="../img/demos/demo2-th.png"></a>
+        <a class="th radius" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a>
 
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_thumbs.scss">_thumbs.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_thumbs.scss">_thumbs.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/labels";
@@ -44,7 +44,7 @@
 /* Using the default styles */
 .your-class-name { @include thumb; }', :css %>
 
-        <p><a class="th" href="../img/demos/demo3.png"><img src="../img/demos/demo3-th.png"></a></p>
+        <p><a class="th" href="../img/demos/demo3.jpg"><img src="../img/demos/demo3-th.jpg"></a></p>
 
         <p>There are also three options you can customize on the fly when writing this mixin. These controls things like: border-width and hover styles for the box-shadow.</p>
 
@@ -64,7 +64,7 @@ $box-shadow-hover: $thumb-box-shadow-hover
 
         <p>You can also add the radius and single-transition mixin on top of this to create even more versatility!</p>
 
-        <p><a class="th-custom" href="../img/demos/demo4.png"><img src="../img/demos/demo4-th.png"></a></p>
+        <p><a class="th-custom" href="../img/demos/demo4.jpg"><img src="../img/demos/demo4-th.jpg"></a></p>
 
         <h5>Default SCSS Variables</h5>