zurb-foundation 4.1.5 → 4.1.6

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (4.1.5)
+    zurb-foundation (4.1.6)
       sass (>= 3.2.0)
 
 GEM

data/README.md

@@ -78,6 +78,10 @@ CodeIgniter
 
 * [Responsive CodeIgniter BoilerPlate](https://github.com/meridiansoftech/meridian_ci_codebase) by [Arnold Mwumva Ford](https://twitter.com/fordarnold) , Meridian Softech
 
+Shopify
+
+* [Foundationify Shopify Theme](https://github.com/lukebussey/foundationify) by Luke Bussey
+
 Other Implementations
 
 * [Mobile First](https://github.com/adamfairhead/mobile-first-foundation) by Adam Fairhead

data/docs/CHANGELOG.md

@@ -1,6 +1,16 @@
+### 4.1.6- May 6, 2013
+* Improved performance for custom select boxes.
+* Bug fix for switches contained within custom forms.
+* Bug fix for directly clicking on checkbox to toggle it
+* Sections are now semantic.
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.1.5...v4.1.6).
+
 ### 4.1.5- April 26, 2013
 * Add support for `indexOf` in legacy browsers
 
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.1.4...v4.1.5).
+
 ### 4.1.4- April 26, 2013
 * Fixes invalid Rails generator path
 

data/docs/components/block-grid.html.erb

@@ -21,7 +21,7 @@
         <h3>Building With Predefined HTML Classes</h3>
         <p>Block grids are made from a <code>ul.small-block-grid-#</code> or <code>ul.large-block-grid-#</code>. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.</p>
 
-        <p>These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the <code>small-block-grid</code> only, the grid will keep its spacing and configuration no matter the screen size. If you use <code>large-block-grid</code> only, the list items will stack on top of eachother for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.</p>
+        <p>These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the <code>small-block-grid</code> only, the grid will keep its spacing and configuration no matter the screen size. If you use <code>large-block-grid</code> only, the list items will stack on top of each other for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.</p>
 
 <%= code_example '
 <!-- Using only the small-block-grid -->

data/docs/components/grid.html.erb

@@ -167,14 +167,14 @@
         <hr>
 
         <h4>Centered Columns</h4>
-        <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself. This is accomplished by adding a class of <code>large-centered</code> or <code>small-centered</code> depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a large version. You can center any number of columns you have.</p>
+        <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself. This is accomplished by adding a class of <code>large-centered</code> or <code>small-centered</code> depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a large version. You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of <code>large-uncentered</code>.</p>
 
 <%= code_example '
 <div class="row">
   <div class="small-3 small-centered columns">3 centered</div>
 </div>
 <div class="row">
-  <div class="small-6 small-centered columns">6 centered</div>
+  <div class="small-6 large-centered columns">6 centered</div>
 </div>
 <div class="row">
   <div class="small-9 small-centered columns">9 centered</div>
@@ -187,10 +187,10 @@
           <div class="small-3 small-centered columns">3 centered</div>
         </div>
         <div class="row display">
-          <div class="small-6 small-centered columns">6 centered</div>
+          <div class="small-6 large-centered columns">6 centered, large</div>
         </div>
         <div class="row display">
-          <div class="small-9 small-centered columns">9 centered</div>
+          <div class="small-9 small-centered large-uncentered columns">9 centered small</div>
         </div>
         <div class="row display">
           <div class="small-11 small-centered columns">11 centered</div>

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

@@ -75,7 +75,7 @@ $inline-list-overflow:         hidden;
 /* We use this to control the list items */
 $inline-list-display:          block;
 
-/* We use this to control any elments within list items */
+/* We use this to control any elements within list items */
 $inline-list-children-display: block;', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
@@ -88,4 +88,4 @@ $inline-list-children-display: block;', :css %>
     <%= render "_sidebar-components.html.erb" %>
   </div>
 
-</div>
+</div>

data/docs/components/panels.html.erb

@@ -37,7 +37,7 @@
         <p>Available HTML class options:</p>
         <ul class="disc">
           <li>Adding <code>.callout</code> to your panel will make it our default blue and add a shiny top edge to help it stand out.</li>
-          <li>You may also you <code>.radius</code> to add a tasteful border-radius to thie mix.</li>
+          <li>You may also you <code>.radius</code> to add a tasteful border-radius to the mix.</li>
         </ul>
 
 <%= code_example '
@@ -120,4 +120,4 @@ $panel-font-color-alt:  #fff;', :css %>
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
+</div>

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

@@ -37,7 +37,7 @@
         <ul class="disc">
           <li><code>&lt;li class="title"&gt;</code>: Creates the styles for a title.</li>
           <li><code>&lt;li class="price"&gt;</code>: Add a price that stands out.</li>
-          <li><code>&lt;li class="description"&gt;</code>: If you need to descript the plan, add this.</li>
+          <li><code>&lt;li class="description"&gt;</code>: If you need to describe the plan, add this.</li>
           <li><code>&lt;li class="bullet-item"&gt;</code>: To call out features, use this list item.</li>
           <li><code>&lt;li class="cta-button"&gt;</code>: To add a button inside a list item, use this.</li>
         </ul>

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

@@ -22,7 +22,7 @@
       <div class="large-12 columns">
 
         <h3>Build With Predefined HTML Classes</h3>
-        <p>There are two ways to add progress bars labels in Foundation 4: with our predefined HTML classes or with our mixins. Building progress bars using our predefined classes is simple, you'll just need to write a <code>&lt;div class="progress"&gt;</code> and inside of that a <code>&lt;span class="meter"&gt;</code>. The meter is the element that you can set a width to, either inline or programatically on your own accord. The simplest way to do this is to change the <code>style="width:%"</code> property on the meter, itself.</p>
+        <p>There are two ways to add progress bars labels in Foundation 4: with our predefined HTML classes or with our mixins. Building progress bars using our predefined classes is simple, you'll just need to write a <code>&lt;div class="progress"&gt;</code> and inside of that a <code>&lt;span class="meter"&gt;</code>. The meter is the element that you can set a width to, either inline or programmatically on your own accord. The simplest way to do this is to change the <code>style="width:%"</code> property on the meter, itself.</p>
 
 <%= code_example '
 <div class="progress"><span class="meter"></span></div>', :html %>

data/docs/components/reveal.html.erb

@@ -93,7 +93,7 @@ $reveal-border-color:    #666;', :css %>
         <hr>
 
         <h3>Using the JavaScript</h3>
-        <p>You don't need ths JS to create reveal modals with Foundation. The only reason you'll need to include <code>foundation.reveal.js</code> is if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the alert plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+        <p>You don't need this JS to create reveal modals with Foundation. The only reason you'll need to include <code>foundation.reveal.js</code> is if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the alert plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
 
         <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
 

data/docs/components/section.html.erb

@@ -8,7 +8,6 @@
       <div class="large-12 columns">
         <h2><%= @page_title %></h2>
         <h4 class="subheader">Sections are similar to tabs as a way to selectively show a single panel of content at a time.</h4>
-
         <div class="row">
           <div class="large-3 columns">
             <div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
@@ -122,7 +121,7 @@
       <div class="large-12 columns">
 
         <h3>Build With Predefined HTML Classes</h3>
-        <p>There are two ways to build sections in Foundation 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <code>&lt;div class="section-container" data-section&gt;</code> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <code>&lt;section class="section"&gt;</code> or <code>&lt;div class="section"&gt;</code>. Within that you'll include some sort of <code>.title</code> (this can be headers or a paragragh) and a <code>&lt;div class="content"&gt;</code>. Here is the markup you'll need:</p>
+        <p>There are two ways to build sections in Foundation 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <code>&lt;div class="section-container" data-section&gt;</code> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <code>&lt;section class="section"&gt;</code> or <code>&lt;div class="section"&gt;</code>. Within that you'll include some sort of <code>.title</code> (this can be headers or a paragraph) and a <code>&lt;div class="content"&gt;</code>. Here is the markup you'll need:</p>
 
         <p>If you want to use ZURB's default styles for section elements you can apply the <code>auto</code>, <code>tabs</code>, <code>accordion</code>, <code>vertical-nav</code>, or <code>horizontal-nav</code> classes. By default, section elements will be an accordion on mobile and tabs on desktops and tablets. If you want to adjust this behavior and force a particular format for your section, you will need to set <code>data-section</code> equal to the format you want to force as shown in the variations below.</p>
 
@@ -141,6 +140,20 @@
     </div>
   </section>
 </div>', :html %>
+<div class="section-container auto" data-section>
+  <section>
+    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>
         <p>This example will automatically switch between tabs and accordion based on the resolution of the device.</p>
 
         <p>The class options:</p>
@@ -174,6 +187,20 @@
     </div>
   </section>
 </div>', :html %>
+        <div class="section-container accordion" data-section="accordion">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
 
         <h6>Tabs</h6>
         <p>Adding a <code>tabs</code> class to the section container will enable tabs on both small and large screens.</p>
@@ -193,6 +220,21 @@
   </section>
 </div>', :html %>
 
+        <div class="section-container tabs" data-section="tabs">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
         <h6>Vertical Tabs</h6>
         <p>Adding a <code>vertical-tabs</code> class to the section container and setting <code>data-section="vertical-tabs"</code> will enable tabs on both small and large screens.</p>
 
@@ -210,8 +252,35 @@
       <p>Content of section 2.</p>
     </div>
   </section>
+  <section>
+    <p class="title" data-section-title><a href="#">Section 3</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 3.</p>
+    </div>
+  </section>
 </div>', :html %>
 
+        <div class="section-container vertical-tabs" data-section="vertical-tabs">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 3</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 3.</p>
+            </div>
+          </section>
+        </div>
+
         <h6>Vertical Nav/Accordion</h6>
         <p>Adding a <code>vertical-nav</code> class to the section container will enable vertical navigation elements on large screens and show an accordion on small screens.</p>
 
@@ -254,6 +323,40 @@
   </div>
 </div>', :html %>
 
+        <div class="row">
+          <div class="large-3 columns">
+            <div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
+              <section>
+                <p class="title" data-section-title><a href="#">Section 1</a></p>
+                <div class="content" data-section-content>
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+              <section>
+                <p class="title" data-section-title><a href="#">Section 2</a></p>
+                <div class="content" data-section-content>
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+            </div>
+          </div>
+          <div class="large-9 columns">
+            <p>Content to the right of the navigation.</p>
+          </div>
+        </div>
+
         <h6>Horizontal Nav/Nav Bar</h6>
         <p>Adding a <code>horizontal-nav</code> class to the section container will enable horizontal navigation elements on large screens and show an accordion on small screens.</p>
 
@@ -290,6 +393,32 @@
 </div>
 ', :html %>
 
+        <div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <ul class="side-nav">
+                <li><a href="#">Link 1</a></li>
+                <li><a href="#">Link 2</a></li>
+                <li><a href="#">Link 3</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Link 1</a></li>
+              </ul>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <ul class="side-nav">
+                <li><a href="#">Link 1</a></li>
+                <li><a href="#">Link 2</a></li>
+                <li><a href="#">Link 3</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Link 1</a></li>
+              </ul>
+            </div>
+          </section>
+        </div>
 
         <h6>Deep Linking</h6>
         <p>Set <code>deep-linking</code> to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching <code>data-slug</code> on the content section that the hash should point to, without the pound (&#35;) sign.</p>
@@ -376,7 +505,7 @@
 
         <hr>
 
-      <!--   <h3>Building with Mixins</h3>
+        <h3>Building with Mixins</h3>
         <p>If you are keen on SCSS and use it for your Foundation projects, you have access to mixins that will let you create any type of section you want and change it within a media query too! Building a section with our mixins requires a bit of predefined structure, but you can choose the classes or ID's to style them with. Start with some sort of block-level container, we use a <code>&lt;div&gt;</code>. This container needs to have <code>data-section="type-of-section"</code>. The section types are explained above. Inside this you create "sections", which can be an HTML5 <code>section</code> element or a <code>&lt;div class="section"&gt;</code>, that will hold content.<p>
 
         <h5>Title and Content Elements</h5>
@@ -392,37 +521,435 @@
       <p>Content of section 1.</p>
     </div>
   </section>
-  <div data-section-region>
+  <section class="your-section-class">
     <p class="your-title-class" data-section-title><a href="#section2">Section 2</a></p>
     <div class="your-content-class" data-slug="section2" data-section-content>
       <p>Content of section 2.</p>
-    </div>
+    </section>
   </div>
 </div>', :html %>
 
-        <hr> -->
+        <p>Here's a look at the available options for the mixins you need to create sections:</p>
+
+<%= code_example '
+@include section-container($base-style, $section-type) { ... }
+
+/* Container Options */
+
+/* This controls whether or not you include default styles when chaining classes, set to true or false */
+$base-style: true
+
+/* This controls the style for the section you are using: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */
+$section-type: accordion
+
+@include section($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color) { ... }
+
+/* Section Options */
+
+/* Control which section type styles come across: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */
+$section-type: accordion
+
+/* You can set the class that is used for the title elements */
+$title-selector: ".title"
+
+/* You can set the class that is used for the content elements */
+$content-selector: ".content"
+
+/* Give the titles some padding, can be any px or emCalc() value */
+$title-padding: $section-padding
+
+/* give the titles a color, any color value */
+$title-color: $section-title-color
+
+/* Set the font size for titles */
+$title-font-size: $section-font-size
+
+/* Set the background color for titles */
+$title-bg: $section-title-bg
+
+/* Change title background for hover */
+$title-bg-hover: $section-title-bg-hover
+
+/* Change title background for .active */
+$title-bg-active: $section-title-bg-active
+
+/* Change title color for .active */
+$title-color-active: $section-title-color
+
+/* Content area background color */
+$content-bg: $section-content-bg
+
+/* Content area padding */
+$content-padding: $section-content-padding
+
+/* Border size in pixels */
+$section-border-size: $section-border-size
+
+/* Border style */
+$section-border-style: $section-border-style
+
+/* Border color */
+$section-border-color: $section-border-color', :css %>
+
+
+        <hr>
+
+        <h5>Auto Configuration</h5>
+        <p>The default use case for our section plugin is to create accordions on small screens and tabs on large screens.</p>
+<%= code_example '
+<div class="section-auto-sample" data-section="auto">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+
+  @media #{$small} {
+    @include section-container(false,$section-type:tabs);
+    & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="section-auto-sample" data-section="auto">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Accordion Configuration</h5>
+        <p>You can have your section act like an accordion the entire time, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-accordion" data-section="accordion">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-accordion {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}', :css %>
+
+        <div class="section-auto-sample-accordion" data-section="accordion">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Tabs Configuration</h5>
+        <p>You can have your section act like tabs the entire time, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-tabs" data-section="tabs">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-tabs {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}', :css %>
+
+        <div class="section-auto-sample-tabs" data-section="tabs">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Vertical Tabs Configuration</h5>
+        <p>You can have your section act like vertical tabs on large screen and go back to accordion on small screens, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-vtabs" data-section="vertical-tabs">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-vtabs {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+@media #{$small} {
+  .section-auto-sample-vtabs {
+    @include section-container($section-type:vertical-tabs);
+    & > section { @include section($section-type:vertical-tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="section-auto-sample-vtabs" data-section="vertical-tabs">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Vertical Nav Configuration</h5>
+        <p>You can have your section act like vertical navigation the entire time, like so:</p>
+<%= code_example '
+<div class="nav-container">
+  <nav>
+    <div class="section-auto-sample-vnav" data-section="vertical-nav">
+      <section>
+        <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+        <div class="content-sample" data-slug="section1" data-section-content>
+          <p>Content of section 1.</p>
+        </div>
+      </section>
+      <section>
+        <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+        <div class="content-sample" data-slug="section2" data-section-content>
+          <p>Content of section 2.</p>
+        </div>
+      </section>
+    </div>
+  </nav>
+  <section class="page-content">
+    <p>Content...</p>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.nav-container { @include grid-row($behavior:nest);
+  > nav { @include grid-column($columns:4); }
+}
+
+.section-auto-sample-vnav {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+@media #{$small} {
+  .section-auto-sample-vnav {
+    @include section-container($section-type:vertical-nav);
+    & > section { @include section($section-type:vertical-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="nav-container">
+          <nav>
+            <div class="section-auto-sample-vnav" data-section="vertical-nav">
+              <section>
+                <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+                <div class="content-sample" data-slug="section1" data-section-content>
+                  <p>Content of section 1.</p>
+                </div>
+              </section>
+              <section>
+                <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+                <div class="content-sample" data-slug="section2" data-section-content>
+                  <p>Content of section 2.</p>
+                </div>
+              </section>
+            </div>
+          </nav>
+          <section class="page-content">
+            <p>Content...</p>
+          </section>
+        </div>
+        <hr>
+
+        <h5>Horizontal Nav Configuration</h5>
+        <p>You can have your section act like horizontal navigation the entire time, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-hnav" data-section="horizontal-nav">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-hnav {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+@media #{$small} {
+  .section-auto-sample-hnav {
+    @include section-container($section-type:horizontal-nav);
+    & > section { @include section($section-type:horizontal-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="section-auto-sample-hnav" data-section="horizontal-nav">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Custom Styles Using the Mixin</h5>
+        <p>You have access to a few options that will make styling the sections really easy and you can add onto it as you want. You'll still need the data-section attribute to match the style you give the mixin.</p>
+<%= code_example '
+<div class="section-auto-sample-custom" data-section="tabs">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-custom {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
+}', :css %>
+
+        <div class="section-auto-sample-custom" data-section="tabs">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
+$include-html-section-classes: $include-html-classes !default;
+
 /* We use these to set padding and hover factor */
-$section-padding:                emCalc(15px);
-$section-function-factor:        10%;
+$section-title-padding:             emCalc(15px);
+$section-content-padding:           emCalc(15px);
+$section-function-factor:           10%;
 
 /* These style the titles */
-$section-title-color:            #333;
-$section-title-bg:               #efefef;
-$section-title-bg-active:        darken($section-title-bg, $section-function-factor);
-$section-title-bg-active-tabs:   #fff;
+$section-title-color:               #333;
+$section-title-bg:                  #efefef;
+$section-title-bg-active:           darken($section-title-bg, $section-function-factor);
+$section-title-bg-active-tabs:      #fff;
+$section-title-bg-hover:            darken($section-title-bg, $section-function-factor/2);
 
 /* Want to control border size, here ya go! */
-$section-border-size:            1px;
-$section-border-style:           solid;
-$section-border-color:           #ccc;
+$section-border-size:               1px;
+$section-border-style:              solid;
+$section-border-color:              #ccc;
+
+/* Font controls */
+$section-font-size:                 emCalc(14px);
 
 /* Control the color of the background and some size options */
-$section-content-bg:             #fff;
-$section-vertical-nav-min-width: emCalc(200px);
-$section-bottom-margin:          emCalc(20px);
+$section-content-bg:                #fff;
+$section-vertical-nav-min-width:    emCalc(200px);
+$section-vertical-tabs-title-width: emCalc(200px);
+$section-bottom-margin:             emCalc(20px);
 ', :css %>
 
     <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
@@ -466,7 +993,7 @@ $section-bottom-margin:          emCalc(20px);
   </section>
 </div>
 ', :html %>
-        
+
         <p><strong>Note:</strong> If you are using Sections in a Modal, or they are being loaded via AJAX, or they are hidden when Foundation is initialized, you will need to reflow the sections to get tabs to display properly:</p>
 
 <%= code_example "