zurb-foundation 4.0.5 → 4.0.7

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

@@ -57,7 +57,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/block-grid";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure. Since we don't have any media queries baked into the mixin itself, you can apply the styles at whatever breakpoint you want! Just change the configuration within each.</p>

data/docs/components/breadcrumbs.html.erb

@@ -38,10 +38,10 @@
         <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>, <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>
+        <p>We've included SCSS mixins used to style breadcrumbs. 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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/breadcrumbs";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>
@@ -120,7 +120,7 @@ $crumb-function-factor:        10%;
 $crumb-border-size:            1px;
 $crumb-border-style:           solid;
 $crumb-border-color:           darken($crumb-bg, $crumb-function-factor);
-$crumb-radius:                 $button-radius;
+$crumb-radius:                 $global-radius;
 
 /* We use these to set various text styles for breadcrumbs. */
 $crumb-font-size:              emCalc(11px);

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

@@ -104,7 +104,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/buttons", "foundation/components/button-groups";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>

data/docs/components/buttons.html.erb

@@ -69,7 +69,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/buttons";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>

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

@@ -57,7 +57,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/buttons", "foundation/components/dropdown-buttons";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>

data/docs/components/dropdown.html.erb

@@ -60,7 +60,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/dropdown";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>

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

@@ -55,7 +55,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global" "foundation/components/flex-video";
 ', :css %>
 
         <p>The markup is just like we showed you above, but you can apply the mixin to your own custom class or ID.</p>

data/docs/components/forms.html.erb

@@ -332,7 +332,7 @@
        <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/buttons", "foundation/forms";', :css %>
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/buttons", "foundation/components/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/global.html.erb

@@ -0,0 +1,92 @@
+<% @side_nav = "css" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+    <div class="row">
+      <div class="large-12 columns">
+        <% @page_title = "Global" %>
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Every Foundation project needs gto include these global styles in order to work properly. These include things like basic formatting and global utility classes.</h4>
+
+        <hr>
+
+<%= code_example "
+/* Set box-sizing globally to handle padding and border widths */
+*,
+*:before,
+*:after {
+  @include box-sizing(border-box);
+}
+
+html,
+body { font-size: $base-font-size; }
+
+/* Default body styles */
+body {
+  background: $body-bg;
+  color: $body-font-color;
+  padding: 0;
+  margin: 0;
+  font-family: $body-font-family;
+  font-weight: $body-font-weight;
+  font-style: $body-font-style;
+  line-height: 1;
+  position: relative;
+}
+
+/* Override outline from normalize, we don't like it */
+a:focus { outline: none; }
+
+/* Grid Defaults to get images and embeds to work properly */
+img,
+object,
+embed { max-width: 100%; height: auto; }
+
+object,
+embed { height: 100%; }
+img { -ms-interpolation-mode: bicubic; }
+
+#map_canvas,
+.map_canvas {
+  img,
+  embed,
+  object { max-width: none !important;
+  }
+}
+
+/* Miscellaneous useful HTML classes */
+.left         { float: left !important; }
+.right        { float: right !important; }
+.text-left    { text-align: left !important; }
+.text-right   { text-align: right !important; }
+.text-center  { text-align: center !important; }
+.text-justify { text-align: justify !important; }
+.hide         { display: none; }
+
+/* Font smoothing */
+/* Antialiased font smoothing works best for light text on a dark background. */
+/* Apply to single elements instead of globally to body. */
+/* Note this only applies to webkit-based desktop browsers on the Mac. */
+.antialiased { -webkit-font-smoothing: antialiased; }
+
+/* Get rid of gap under images by making them display: inline-block; by default */
+img { display: inline-block; }
+
+/* Make sure textarea takes on height automatically */
+textarea { height: auto; min-height: 50px; }
+
+/* Make select elements 100% width by default */
+select { width: 100%; }
+", :css %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>
+

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

@@ -44,7 +44,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/inline-lists";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/keystrokes.html.erb

@@ -31,7 +31,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/keystrokes";
 ', :css %>
 
         <h5>Quick Mixin</h5>
@@ -63,7 +63,7 @@ $keystroke-bg:              darken(#fff, $keystroke-function-factor);
 $keystroke-border-style:    solid;
 $keystroke-border-width:    1px;
 $keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor);
-$keystroke-radius:          $button-radius;', :css %>
+$keystroke-radius:          $global-radius;', :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>
 

data/docs/components/labels.html.erb

@@ -46,7 +46,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/labels";
 ', :css %>
 
         <h5>Quick Mixin</h5>
@@ -82,7 +82,7 @@ $radius: false
 <%= code_example '
 /* We use these to style the labels */
 $label-padding:     emCalc(3px) emCalc(6px) emCalc(4px);
-$label-radius:      $button-radius;
+$label-radius:      $global-radius;
 
 /* We use these to style the label text */
 $label-font-size:   emCalc(14px);

data/docs/components/orbit.html.erb

@@ -9,7 +9,7 @@
         <h2><%= @page_title %></h2>
         <h4 class="subheader">Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.</h4>
 
-        <ul id="featured1" data-orbit>
+        <ul id="featured1" data-orbit data-options="timer_speed:5000;">
           <li>
             <img src="../img/demos/demo1.jpg" />
             <div class="orbit-caption">
@@ -236,7 +236,7 @@ $stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function
 
         <p>Orbit options can only be passed in during initialization at this time.</p>
 
-    <%= code_example "
+<%= code_example "
 {
   timer_speed: 10000,
   animation_speed: 500,
@@ -258,6 +258,14 @@ $stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function
   orbit_transition_class: 'orbit-transitioning'
 }", :js %>
 
+    <p>You can also use the <code>data-options</code> attribute to pass configuration settings to Orbit. Treat it like a <code>style</code> property:</p>
+
+<%= code_example '
+<ul data-orbit data-options="timer_speed:2500; bullets:false;">
+  ...
+</ul>
+', :html %>
+
       </div>
     </div>
 

data/docs/components/pagination.html.erb

@@ -91,7 +91,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/pagination";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:</p>

data/docs/components/panels.html.erb

@@ -55,7 +55,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/panels";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the <code>&lt;div&gt;</code>.</p>

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

@@ -61,7 +61,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/pricing-tables";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like with the <code>&lt;ul&gt;</code> and the list items inside it.</p>

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

@@ -49,7 +49,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/progress-bars";
 ', :css %>
 
         <h5>Container Mixin</h5>
@@ -99,7 +99,7 @@ $progress-bar-height: emCalc(25px);
 $progress-bar-border-color: darken(#fff, 20%);
 $progress-bar-border-size: 1px;
 $progress-bar-border-style: solid;
-$progress-bar-border-radius: $button-radius;
+$progress-bar-border-radius: $global-radius;
 
 /* We use these to control the margin & padding */
 $progress-bar-pad: emCalc(2px);

data/docs/components/section.html.erb

@@ -150,6 +150,24 @@
         <hr>
 
         <h3>Variations</h3>
+        <h6>Accordion</h6>
+        <p>Adding an <code>accordion</code> class to the section container will show an accordion on both small and large screens.</p>
+<%= code_example '
+<div class="section-container accordion" data-section>
+  <section class="section">
+    <p class="title"><a href="#">Section 1</a></p>
+    <div class="content">
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Section 2</a></p>
+    <div class="content">
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+        
         <h6>Tabs/Accordion</h6>
         <p>Adding a <code>tabs</code> class to the section container will enable tabs on large screens and show an accordion on small screens.</p>
 <%= code_example '

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

@@ -56,7 +56,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/side-nav";
 ', :css %>
 
         <h5>Quick Mixin</h5>

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

@@ -56,7 +56,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/buttons", "foundation/components/split-buttons";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>

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

@@ -50,7 +50,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/sub-nav";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/switch.html.erb

@@ -100,7 +100,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/switch";
 ', :css %>
 
         <p>The markup is pretty simple, you'll only need a single class or ID on the container to apply the mixin.</p>

data/docs/components/thumbnails.html.erb

@@ -34,7 +34,7 @@
         <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";
+@import "foundation/foundation-global", "foundation/components/global", "foundation/components/labels";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/top-bar.html.erb

@@ -22,12 +22,12 @@
           <section class="top-bar-section">
             <ul class="left">
               <li class="divider"></li>
-              <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a>
+              <li class="has-dropdown"><a href="<%= features_path %>">Item 1 Item 1 Item 1</a>
 
                 <ul class="dropdown">
-                  <li><label>Level One</label></li>
+                  <!-- <li><label>Level One</label></li> -->
                   <li><a href="#">Sub-item 1</a></li>
-                  <li><a href="#">Sub-item 2</a></li>
+                  <!-- <li><a href="#">Sub-item 2</a></li>
                   <li class="divider"></li>
                   <li><a href="#">Sub-item 3</a></li>
                   <li class="has-dropdown"><a href="#">Sub-item 4</a>
@@ -56,10 +56,10 @@
                       <li><a href="#">Sub-item 4</a>
                     </ul>
                   </li>
-                  <li><a href="#">Sub-item 5</a></li>
+                  <li><a href="#">Sub-item 5</a></li> -->
                 </ul>
               </li>
-              <li class="divider"></li>
+              <!-- <li class="divider"></li> -->
             </ul>
             <!-- Right Nav Section -->
             <ul class="right">

data/docs/css/docs.scss

@@ -19,7 +19,6 @@
 .css > .CodeRay:before { content: "SCSS"; }
 .js > .CodeRay:before { content: "JS"; }
 
-
 /* Docs Footer Styles */
 .row.full-width {
   max-width: 100%;

data/docs/layout.html.erb

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="<%= asset_path %>/docs.css" />
     <script src="<%= asset_path %>/vendor/custom.modernizr.js"></script>
   </head>
-  <body>
+  <body class="antialiased">
 
     <nav class="top-bar">
       <ul class="title-area">
@@ -109,8 +109,7 @@
     </script>
     <script src="<%= asset_path %>/docs.js"></script>
     <script>
-      $(document).foundation()
-                 .foundation('joyride', 'start');
+      $(document).foundation();
     </script>
   </body>
 </html>

data/docs/sass.html.erb

@@ -202,7 +202,7 @@ bundle exec compass create . -r zurb-foundation --using foundation
     <hr>
 
     <h3>Foundation Global Settings and Mixins</h3>
-    <p>We've inlcluded a global settings file that holds veriables and mixins that are used throughout the entirety of Foundation. Here's a look at that file:</p>
+    <p>We've included a global settings file that holds variables and mixins that are used throughout the entirety of Foundation. Here's a look at that file:</p>
 
 <%= code_example '
 // Foundation Global Function, Variables and Mixins
@@ -210,7 +210,11 @@ bundle exec compass create . -r zurb-foundation --using foundation
 // Variables
 //
 
-// This is the default html and body font-size for the base em value.
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with brower-based text zoom or user-set defaults.
+$base-font-size: 100%;
+
+// Set your base font-size in pixels so emCalc can do its magic below
 $em-base: 16px;
 
 // We use these to control various global styles
@@ -220,9 +224,6 @@ $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 $body-font-weight: normal;
 $body-font-style: normal;
 
-// We use this to control font-smoothing
-$font-smoothing: antialiased;
-
 // We use these to control text direction settings
 $text-direction: ltr;
 
@@ -245,6 +246,21 @@ $shiny-edge-active-color: rgba(#000, .2);
 $include-html-classes: true;
 $include-print-styles: true;
 
+// Modular html classes
+$include-html-grid-classes: $include-html-classes;
+$include-html-visibility-classes: $include-html-classes;
+$include-html-button-classes: $include-html-classes;
+$include-html-form-classes: $include-html-classes;
+$include-html-media-classes: $include-html-classes;
+$include-html-section-classes: $include-html-classes;
+$include-html-reveal-classes: $include-html-classes;
+$include-html-alert-classes: $include-html-classes;
+$include-html-nav-classes: $include-html-classes;
+$include-html-label-classes: $include-html-classes;
+$include-html-panel-classes: $include-html-classes;
+$include-html-pricing-classes: $include-html-classes;
+$include-html-progress-classes: $include-html-classes;
+
 
 //
 // Functions
@@ -350,15 +366,6 @@ $include-print-styles: true;
   &:after { clear: both; }
 }
 
-// Media Queries
-$small-screen: emCalc(768px);
-$medium-screen: emCalc(1280px);
-$large-screen: emCalc(1440px);
-
-$small: "only screen and (min-width:"#{$small-screen}")" !default;
-$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
-$large: "only screen and (min-width:"#{$large-screen}")" !default;
-
 ', :css %>