zurb-foundation 4.0.3 → 4.0.4

data/CHANGELOG.md

@@ -2,6 +2,17 @@
 We'll keep you up to date with what we've released so you at least have a gist of what goes into each update. For the most part, we'll try to list things out as detailed as we see necessary.
 
 ---
+### 4.0.4
+This patch fixes various bugs that have been submitted since release. We'll be more specific with changelog updates going forward.
+
+### 4.0.3
+Bug fixes
+
+### 4.0.2
+Bug fixes
+
+### 4.0.1
+Bug fixes
 
 ### **4.0**- February 28, 2013
 Initial launch of Foundation 4, a rewritten, mobile-first implementation of the framework. Major enhancements include a mobile-first approach across the board, Scss tools to allow for all-semantic coding, and rewritten JS plugins for speed and ease of use. Marketing site updates, new docs, refined and simplified styles and more. Review the [migration guide](http://foundation.zurb.com/migration.php) for more information.

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (4.0.3)
+    zurb-foundation (4.0.4)
       rake
       sass (>= 3.2.0)
 

data/README.md

@@ -61,6 +61,10 @@ MODX
 
 * [NuGet Package for ASP.Net MVC](http://www.nuget.org/packages/Foundation3_MVC4) by Edward Charbeneau, @EdCharbeneau
 
+Middleman
+
+* [Middleman Skeleton](https://github.com/axyz/middleman-zurb-foundation) by [Andrea Moretti](https://twitter.com/axyz)
+
 Python
 * [Pyramid Scaffold](https://github.com/ppinette/pyramid_foundation) by Parker Pinette
 
@@ -90,6 +94,7 @@ Grid displayer
 
 * [Grid displayer bookmarklet](http://alefeuvre.github.com/foundation-grid-displayer/) by [Antoine Lefeuvre](http://twitter.com/jiraisurfer)
 * [Responsive Design Bookmarklet](http://responsive.victorcoulon.fr/) by [Victor Coulon](https://twitter.com/_victa)
+* [Vertical Rhythm Grid Bookmarklet](http://gridwax.gs/) by [Kevin Altman](http://twitter.com/itg)
 
 Modular Scale
 

data/docs/Gemfile

@@ -1,4 +1,5 @@
-source :rubygems
+source 'https://rubygems.org'
+
 gem 'sprockets'
 gem 'foreman'
 gem 'stasis'

data/docs/Gemfile.lock

@@ -1,5 +1,5 @@
 GEM
-  remote: http://rubygems.org/
+  remote: https://rubygems.org/
   specs:
     coderay (1.0.9)
     directory_watcher (1.4.1)

data/docs/_sidebar-components.html.erb

@@ -1,13 +1,13 @@
-<div class="section-container accordion" data-section data-options="deep_linking: false">
+<div class="docs section-container accordion" data-section data-options="deep_linking: false">
   <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
     <p class="title"><a href="#">Using Foundation</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="http://foundation.zurb.com/docs/">Get Started</a></li>
+        <li><a href="../">Get Started</a></li>
         <li><a href="../javascript.html">Javascript</a></li>
         <li><a href="../sass.html">Sass</a></li>
         <li><a href="../rails.html">Rails</a></li>
-        <li><a href="visibility.html">Visibility Classes</a></li>
+        <li><a class="<%= @page_title == 'Visibility Classes' ? 'active': '' %>" href="visibility.html">Visibility Classes</a></li>
       </ul>
     </div>
   </section>
@@ -15,8 +15,8 @@
     <p class="title"><a href="#">Grid</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="grid.html">Grid</a></li>
-        <li><a href="block-grid.html">Block Grid</a></li>
+        <li><a class="<%= @page_title == 'Grid' ? 'active': '' %>" href="grid.html">Grid</a></li>
+        <li><a class="<%= @page_title == 'Block Grid' ? 'active': '' %>" href="block-grid.html">Block Grid</a></li>
       </ul>
     </div>
   </section>
@@ -24,11 +24,11 @@
     <p class="title"><a href="#">Navigation</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="pagination.html">Pagination</a></li>
-        <li><a href="side-nav.html">Side Nav</a></li>
-        <li><a href="sub-nav.html">Sub Nav</a></li>
-        <li><a href="top-bar.html">Top Bar</a></li>
-        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
+        <li><a class="<%= @page_title == 'Pagination' ? 'active': '' %>" href="pagination.html">Pagination</a></li>
+        <li><a class="<%= @page_title == 'Side Nav' ? 'active': '' %>" href="side-nav.html">Side Nav</a></li>
+        <li><a class="<%= @page_title == 'Sub Nav' ? 'active': '' %>" href="sub-nav.html">Sub Nav</a></li>
+        <li><a class="<%= @page_title == 'Top Bar' ? 'active': '' %>" href="top-bar.html">Top Bar</a></li>
+        <li><a class="<%= @page_title == 'Breadcrumbs' ? 'active': '' %>" href="breadcrumbs.html">Breadcrumbs</a></li>
       </ul>
     </div>
   </section>
@@ -36,10 +36,10 @@
     <p class="title"><a href="#">Buttons</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="buttons.html">Buttons</a></li>
-        <li><a href="button-groups.html">Button Groups</a></li>
-        <li><a href="dropdown-buttons.html">Dropdown Buttons</a></li>
-        <li><a href="split-buttons.html">Split Buttons</a></li>
+        <li><a class="<%= @page_title == 'Buttons' ? 'active': '' %>" href="buttons.html">Buttons</a></li>
+        <li><a class="<%= @page_title == 'Button Groups' ? 'active': '' %>" href="button-groups.html">Button Groups</a></li>
+        <li><a class="<%= @page_title == 'Dropdown Buttons' ? 'active': '' %>" href="dropdown-buttons.html">Dropdown Buttons</a></li>
+        <li><a class="<%= @page_title == 'Split Buttons' ? 'active': '' %>" href="split-buttons.html">Split Buttons</a></li>
       </ul>
     </div>
   </section>
@@ -47,9 +47,9 @@
     <p class="title"><a href="#">Forms</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="forms.html">Forms</a></li>
-        <li><a href="custom-forms.html">Custom Forms</a></li>
-        <li><a href="switch.html">Switch</a></li>
+        <li><a class="<%= @page_title == 'Forms' ? 'active': '' %>" href="forms.html">Forms</a></li>
+        <li><a class="<%= @page_title == 'Custom Forms' ? 'active': '' %>" href="custom-forms.html">Custom Forms</a></li>
+        <li><a class="<%= @page_title == 'Switch' ? 'active': '' %>" href="switch.html">Switch</a></li>
       </ul>
     </div>
   </section>
@@ -57,10 +57,10 @@
     <p class="title"><a href="#">Typography</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="type.html">Type</a></li>
-        <li><a href="inline-lists.html">Inline Lists</a></li>
-        <li><a href="labels.html">Labels</a></li>
-        <li><a href="keystrokes.html">Keystrokes</a></li>
+        <li><a class="<%= @page_title == 'Typography' ? 'active': '' %>" href="type.html">Type</a></li>
+        <li><a class="<%= @page_title == 'Inline Lists' ? 'active': '' %>" href="inline-lists.html">Inline Lists</a></li>
+        <li><a class="<%= @page_title == 'Labels' ? 'active': '' %>" href="labels.html">Labels</a></li>
+        <li><a class="<%= @page_title == 'Keystrokes' ? 'active': '' %>" href="keystrokes.html">Keystrokes</a></li>
       </ul>
     </div>
   </section>
@@ -68,13 +68,13 @@
     <p class="title"><a href="#">CSS Components</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="alert-boxes.html">Alert Boxes</a></li>
-        <li><a href="panels.html">Panels</a></li>
-        <li><a href="pricing-tables.html">Pricing Tables</a></li>
-        <li><a href="progress-bars.html">Progress Bars</a></li>
-        <li><a href="tables.html">Tables</a></li>
-        <li><a href="thumbnails.html">Thumbnails</a></li>
-        <li><a href="flex-video.html">Flex Video</a></li>
+        <li><a class="<%= @page_title == 'Alert Boxes' ? 'active': '' %>" href="alert-boxes.html">Alert Boxes</a></li>
+        <li><a class="<%= @page_title == 'Panels' ? 'active': '' %>" href="panels.html">Panels</a></li>
+        <li><a class="<%= @page_title == 'Pricing Tables' ? 'active': '' %>" href="pricing-tables.html">Pricing Tables</a></li>
+        <li><a class="<%= @page_title == 'Progress Bars' ? 'active': '' %>" href="progress-bars.html">Progress Bars</a></li>
+        <li><a class="<%= @page_title == 'Tables' ? 'active': '' %>" href="tables.html">Tables</a></li>
+        <li><a class="<%= @page_title == 'Thumbnails' ? 'active': '' %>" href="thumbnails.html">Thumbnails</a></li>
+        <li><a class="<%= @page_title == 'Flex Video' ? 'active': '' %>" href="flex-video.html">Flex Video</a></li>
       </ul>
     </div>
   </section>
@@ -82,29 +82,29 @@
     <p class="title"><a href="#">Javascript</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="clearing.html">Clearing</a></li>
-        <li><a href="dropdown.html">Dropdown</a></li>
-        <li><a href="joyride.html">Joyride</a></li>
-        <li><a href="magellan.html">Magellan</a></li>
-        <li><a href="orbit.html">Orbit</a></li>
-        <li><a href="reveal.html">Reveal</a></li>
-        <li><a href="section.html">Section</a></li>
-        <li><a href="tooltips.html">Tooltips</a></li>
+        <li><a class="<%= @page_title == 'Clearing' ? 'active': '' %>" href="clearing.html">Clearing</a></li>
+        <li><a class="<%= @page_title == 'Dropdown' ? 'active': '' %>" href="dropdown.html">Dropdown</a></li>
+        <li><a class="<%= @page_title == 'Joyride' ? 'active': '' %>" href="joyride.html">Joyride</a></li>
+        <li><a class="<%= @page_title == 'Magellan' ? 'active': '' %>" href="magellan.html">Magellan</a></li>
+        <li><a class="<%= @page_title == 'Orbit' ? 'active': '' %>" href="orbit.html">Orbit</a></li>
+        <li><a class="<%= @page_title == 'Reveal' ? 'active': '' %>" href="reveal.html">Reveal</a></li>
+        <li><a class="<%= @page_title == 'Sections' ? 'active': '' %>" href="section.html">Section</a></li>
+        <li><a class="<%= @page_title == 'Tooltips' ? 'active': '' %>" href="tooltips.html">Tooltips</a></li>
       </ul>
     </div>
   </section>
-  <section class="section">
+  <section class="section <%= @page_title == 'FAQ' ? 'active': '' %>">
     <p class="title"><a href="../faq.html">FAQ</a></p>
   </section>
-  <section class="section">
+  <section class="section <%= @page_title == 'Support' ? 'active': '' %>">
     <p class="title"><a href="../support.html">Support</a></p>
   </section>
 </div>
 
 <p><a href="http://foundation.zurb.com/download.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
 
-<!-- <div class="jobs hide-for-small">
+<div class="jobs hide-for-small">
   <h5>Awesome product jobs:</h5>
   <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3&variation=foundation-sidebar"></script>
   <a id="via" href="http://zurbjobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
-</div> -->
+</div>

data/docs/_sidebar.html.erb

@@ -1,12 +1,12 @@
-<div class="section-container accordion" data-section data-options="deep_linking: false">
+<div class="docs section-container accordion" data-section data-options="deep_linking: false">
   <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
     <p class="title"><a href="#">Using Foundation</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="http://foundation.zurb.com/docs/">Get Started</a></li>
-        <li><a href="javascript.html">Javascript</a></li>
-        <li><a href="sass.html">Sass</a></li>
-        <li><a href="rails.html">Rails</a></li>
+        <li><a class="<%= @page_title == 'Getting Started' ? 'active': '' %>" href="index.html">Get Started</a></li>
+        <li><a class="<%= @page_title == 'Javascript' ? 'active': '' %>" href="javascript.html">Javascript</a></li>
+        <li><a class="<%= @page_title == 'Sass' ? 'active': '' %>" href="sass.html">Sass</a></li>
+        <li><a class="<%= @page_title == 'Rails' ? 'active': '' %>" href="rails.html">Rails</a></li>
         <li><a href="components/visibility.html">Visibility Classes</a></li>
       </ul>
     </div>
@@ -92,18 +92,18 @@
       </ul>
     </div>
   </section>
-  <section class="section">
+  <section class="section <%= @page_title == 'FAQ' ? 'active': '' %>">
     <p class="title"><a href="faq.html">FAQ</a></p>
   </section>
-  <section class="section">
+  <section class="section <%= @page_title == 'Support' ? 'active': '' %>">
     <p class="title"><a href="support.html">Support</a></p>
   </section>
 </div>
 
 <p><a href="http://foundation.zurb.com/download.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
 
-<!-- <div class="jobs hide-for-small">
+<div class="jobs hide-for-small">
   <h5>Awesome product jobs:</h5>
   <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3&variation=foundation-sidebar"></script>
   <a id="via" href="http://zurbjobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
-</div> -->
+</div>

data/docs/changelog.html.erb

@@ -7,14 +7,36 @@
 
     <% @page_title = "Changelog" %>
     <h2><%= @page_title %></h2>
-    
+
     <h4 class="subheader">We'll keep you up to date with what we've released so you at least have a gist of what goes into each update. For the most part, we'll try to list things out as detailed as we see necessary.</h4>
-    
+
     <hr />
-    
+
+    <h5>4.0.4</h5>
+    <p>This patch fixes various bugs that have been submitted since release. We'll be more specific with changelog updates going forward.</p>
+
+    <hr>
+
+    <h5>4.0.3</h5>
+    <p>Bug fixes.</p>
+
+    <hr>
+
+    <h5>4.0.2</h5>
+    <p>Bug fixes.</p>
+
+    <hr>
+
+    <h5>4.0.1</h5>
+    <p>This patch fixes a few quick bugs.</p>
+
+    <hr>
+
     <h5><strong>4.0</strong> &mdash; Feburary 28, 2013</h5>
     <p>Initial launch of Foundation 4, a rewritten, mobile-first implementation of the framework. Major enhancements include a mobile-first approach across the board, Scss tools to allow for all-semantic coding, and rewritten JS plugins for speed and ease of use. Marketing site updates, new docs, refined and simplified styles and more. Review the <a href="http://foundation.zurb.com/migration.php">migration guide</a> for more information.</p>
-    
+
+    <hr>
+
     <h5>3.2.5 &mdash; January 26, 2013</h5>
     <p>This patch fixes compatability with jQuery 1.9. This patch includes:</p>
     <ul class="disc">
@@ -23,6 +45,8 @@
       <li>Add Clearing and Joyride to SCSS project templates.</li>
     </ul>
 
+    <hr>
+
     <h5>3.2.4 &mdash; January 14, 2013</h5>
     <p>This patch includes bug fixes and a few style improvements for small UI elements. This patch includes:</p>
     <ul class="disc">
@@ -171,8 +195,8 @@
       <h5 class="subheader">Foundation is the most advanced front-end framework in existence. We've ditched IE7 so that we can do more awesome things and push the web to where it needs to be.</h5>
       <a class="button" href="support.html">Browser Support &raquo;</a> <a class="secondary button" href="faq.html">Frequently Asked Questions &raquo;</a>
     </div>
-    
-    
+
+
   </div>
 </div>
 

data/docs/components/alert-boxes.html.erb

@@ -48,7 +48,7 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>We've included SCSS mixins used to style alert boxes. To use these mixins, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_alerts.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 alert boxes. 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/_alert-boxes.scss">_alert-boxes.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/alerts";

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

@@ -10,10 +10,10 @@
         <h4 class="subheader">Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.</h4>
 
         <ul class="small-block-grid-2 large-block-grid-5">
-          <li><img src="../img/demos/demo1.png"></li>
-          <li><img src="../img/demos/demo2.png"></li>
-          <li><img src="../img/demos/demo3.png"></li>
-          <li><img src="../img/demos/demo4.png"></li>
+          <li><img src="../img/demos/demo1.jpg"></li>
+          <li><img src="../img/demos/demo2.jpg"></li>
+          <li><img src="../img/demos/demo3.jpg"></li>
+          <li><img src="../img/demos/demo4.jpg"></li>
         </ul>
 
         <hr>
@@ -54,7 +54,7 @@
         <hr>
 
         <h3>Using The Mixin</h3>
-        <p>We've included SCSS mixins used to style block-grids. 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/tree/master/scss/foundation/components">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_block-grid.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 block-grids. 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/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 href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_block-grid.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/block-grid";
@@ -90,11 +90,11 @@ $base-style: true
 ', :css %>
 
         <ul class="small-block-grid-5">
-          <li><img src="../img/demos/demo1.png"></li>
-          <li><img src="../img/demos/demo2.png"></li>
-          <li><img src="../img/demos/demo3.png"></li>
-          <li><img src="../img/demos/demo4.png"></li>
-          <li><img src="../img/demos/demo5.png"></li>
+          <li><img src="../img/demos/demo1.jpg"></li>
+          <li><img src="../img/demos/demo2.jpg"></li>
+          <li><img src="../img/demos/demo3.jpg"></li>
+          <li><img src="../img/demos/demo4.jpg"></li>
+          <li><img src="../img/demos/demo5.jpg"></li>
         </ul>
 
         <h5>Available SCSS Variables</h5>

data/docs/components/breadcrumbs.html.erb

@@ -38,7 +38,7 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>We've included SCSS mixins used to style alert boxes. 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/_breadcrumbs.scss">_breadcrumbs.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 alert boxes. 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/_breadcrumbs.scss">_breadcrumbs.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/breadcrumbs";

data/docs/components/button-groups.html.erb

@@ -65,12 +65,43 @@
 </ul>
 ', :html %>
 
-        <p>For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>buttons and button-groups from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+        <h5>Button Bars</h5>
+        <p>A button bar is a group of button groups (I N C E P T I O N), perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a <code>.button-bar</code> and Foundation takes care of the rest.</p>
+
+<%= code_example '
+<div class="button-bar">
+  <ul class="button-group">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+  <ul class="button-group">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+</div>
+', :html %>
+<div class="button-bar">
+  <ul class="button-group">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+  <ul class="button-group secondary">
+    <li><a href="#" class="small button">Button 1</a></li>
+    <li><a href="#" class="small button">Button 2</a></li>
+    <li><a href="#" class="small button">Button 3</a></li>
+  </ul>
+</div>
+
+
+        <p>For any of these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>buttons and button-groups from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
 
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>We've included SCSS mixins used to style button groups. 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/_button-groups.scss">_button-groups.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 button groups. 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>, <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/_button-groups.scss">_button-groups.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/button-groups";
@@ -156,10 +187,33 @@ $float: left
       <li><a href="#" class="button-class">Button 3</a></li>
     </ul>
 
+        <h5>Building Button Bars</h5>
+        <p>You can also build button bars with mixin options.</p>
+<%= code_example '
+<div class="your-bar-class-name">
+  <ul class="your-class-name">
+    <li><a href="#" class="your-button-class">Button 1</a></li>
+    <li><a href="#" class="your-button-class">Button 2</a></li>
+    <li><a href="#" class="your-button-class">Button 3</a></li>
+  </ul>
+  <ul class="your-class-name">
+    <li><a href="#" class="your-button-class">Button 1</a></li>
+    <li><a href="#" class="your-button-class">Button 2</a></li>
+    <li><a href="#" class="your-button-class">Button 3</a></li>
+  </ul>
+</div>
+', :html %>
+
+<%= code_example '
+.your-bar-class-name { @include clearfix;
+  .your-button-class { @include button-group-container(false,true); }
+}
+', :css %>
+
         <h5>Default SCSS Variables</h5>
 <%= code_example '
 /* We use this to set the margin below button groups. */
-$button-group-bottom-margin: emCalc(20px);
+$button-bar-margin-right: emCalc(10px);
 ', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>