zurb-foundation 4.1.6 → 4.2.0

data/docs/components/panels.html.erb

@@ -52,10 +52,10 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style panels so that you can code smarter. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/panels";
+@import "foundation/variables", "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>
@@ -111,7 +111,7 @@ $panel-padding:         emCalc(20px);
 $panel-font-color:      #333;
 $panel-font-color-alt:  #fff;', :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>
+        <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>_variables.scss</strong>.</p>
 
 
       </div>

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

@@ -58,10 +58,10 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style pricing tables so that you can code how you want to. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/pricing-tables";
+@import "foundation/variables", "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>
@@ -145,7 +145,7 @@ $price-cta-bg:              #f5f5f5;
 $price-cta-align:           center;
 $price-cta-padding:         emCalc(20px) emCalc(20px) 0;', :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>
+        <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>_variables.scss</strong>.</p>
 
       </div>
     </div>

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

@@ -46,10 +46,10 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style progress bars. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/progress-bars";
+@import "foundation/variables", "foundation/components/global", "foundation/components/progress-bars";
 ', :css %>
 
         <h5>Container Mixin</h5>
@@ -112,7 +112,7 @@ $progress-meter-secondary-color: $secondary-color;
 $progress-meter-success-color: $success-color;
 $progress-meter-alert-color: $alert-color;', :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>
+        <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>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/reveal.html.erb

@@ -33,11 +33,11 @@
 
         <p>The class options:</p>
         <ul class="disc">
-          <li><code>tiny</code>: Set the width to 30%.</li>
-          <li><code>small</code>: Set the width to 40%.</li>
-          <li><code>medium</code>: Set the width to 60%.</li>
-          <li><code>large</code>: Set the width to 70%.</li>
-          <li><code>xlarge</code>: Set the width to 95%.</li>
+          <li><code>small</code>: Set the width to 30%.</li>
+          <li><code>medium</code>: Set the width to 40%.</li>
+          <li><code>large</code>: Set the width to 60%.</li>
+          <li><code>xlarge</code>: Set the width to 70%.</li>
+          <li><code>expand</code>: Set the width to 95%.</li>
         </ul>
 
         <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected reveal from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
@@ -60,8 +60,124 @@ $('#myModal').foundation('reveal', 'open');
 $('#myModal').foundation('reveal', 'close');
 ", :js %>
 
+        <h5>Firing a Reveal Modal with Ajax Content</h5>
+        <p>To launch a modal with content from another page, just add a <code>data-reveal-ajax</code> attribute pointing to the url of that page. When clicked, the Reveal modal will be opened with a content from that page. Beware, that content of the object from <code>data-reveal-id</code> attribute will be overwritten as a result.</p>
+        <p>To use an url from <code>href</code> attribute just add <code>data-reveal-ajax="true"</code> instead.</p>
+
+<%= code_example '
+<button data-reveal-id="myModal" data-reveal-ajax="http://some-url">
+    Click Me For A Modal
+</button>
+
+<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true">
+    Click Me For A Modal
+</a>
+', :html %>
+
+        <p>Ajax-based Reveal modals can also be opened via JavaScript:</p>
+
+<%= code_example "
+// just an url
+$('#myModal').foundation('reveal', 'open', 'http://some-url');
+
+// url with extra parameters
+$('#myModal').foundation('reveal', 'open', {
+    url: 'http://some-url',
+    data: {param1: 'value1', param2: 'value2'}
+});
+
+// url with custom callbacks
+$('#myModal').foundation('reveal', 'open', {
+    url: 'http://some-url',
+    success: function(data) {
+        alert('modal data loaded');
+    },
+    error: function() {
+        alert('failed loading modal');
+    }
+});
+", :js %>
+
+        <p>Please refer to <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">http://api.jquery.com/jQuery.ajax/</a> for a complete list of possible parameters.</p>
+
         <hr>
 
+        <h3>Build with Mixins</h3>
+        <p>We've included SCSS mixins used to style reveal. 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/_variables.scss">_variables.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">_reveal.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/variables", "foundation/components/global", "foundation/components/reveal";
+', :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>
+
+<%= code_example '
+<div id="myModalID" class="your-class">
+  <h2>This is a modal.</h2>
+  <p>Some text...</p>
+  <a class="your-close-class">&times;</a>
+</div>', :html %>
+
+        <h5>Background Mixin</h5>
+        <p>The first mixin you'll need to setup when using Reveal through SCSS is the background cover. This is what fades out the rest of the page to help show the modal. The container mixin looks like this:</p>
+
+<%= code_example '
+.reveal-modal-bg { @include reveal-bg; }', :css %>
+
+        <h5>Base Mixin</h5>
+        <p>This mixin is used to set the basic styles for positioning, visibility and a few other necessities. This mixin also gives you the ability to set the width of the modal. The mixin looks like this:</p>
+
+<%= code_example '
+.your-modal-class { @include reveal-modal-base($base-style, $width); }
+
+/* Control whether or not base styles are included, defaults to "true" */
+$base-style: true;
+
+/* Control the width of each modal, defaults to 80% */
+$width: $reveal-default-width;
+', :css %>
+
+        <h5>Style Mixin</h5>
+        <p>This mixin gives you access to changing the background color, borders, shadows, and offsets. You can create lots of different modals with this mixin. Here's what the mixin looks like:</p>
+
+<%= code_example '
+.your-modal-class { @include reveal-modal-style($bg, $padding, $border, $border-style, $border-width, $border-color, $box-shadow, $top-offset); }
+
+/* Set this to a color to change the background of the modal */
+$bg: $reveal-modal-bg;
+
+/* Padding around content inside the modals */
+$padding: $reveal-modal-padding;
+
+/* Control whether or not you want a border */
+$border: true;
+
+/* If you set border to "true", this controls border style */
+$border-style: $reveal-border-style;
+
+/* If you set border to "true", this controls border width */
+$border-width: $reveal-border-width;
+
+/* If you set border to "true", this controls border color */
+$border-color: $reveal-border-color;
+
+/* Control whether or not you want box-shadows */
+$box-shadow: true;
+
+/* Set how far from the top you want your modal to sit */
+$top-offset: $reveal-position-top;
+', :css %>
+
+        <h5>The Close Button Mixin</h5>
+        <p>One important aspect we musn't forget is the close button. We've given you a mixin that will help style the button, it looks like this:</p>
+
+<%= code_example '
+.your-modal-close-class { @include reveal-close($color); }
+
+/* Change the color of the close button */
+$color: $reveal-close-color;
+', :css %>
+
         <h5>Default SCSS Variables</h5>
 
     <%= code_example '
@@ -86,9 +202,12 @@ $reveal-close-weight:    bold;
 /* We use these to control the modal border */
 $reveal-border-style:    solid;
 $reveal-border-width:    1px;
-$reveal-border-color:    #666;', :css %>
+$reveal-border-color:    #666;
+
+$reveal-modal-class: "reveal-modal";
+$close-reveal-modal-class: "close-reveal-modal";', :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>
+        <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>_variables.scss</strong>.</p>
 
         <hr>
 

data/docs/components/section.html.erb

@@ -74,7 +74,46 @@
               <section>
                 <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
                 <div class="content" data-slug="panel2" data-section-content>
-                  <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                  <div class="section-container auto" data-section data-options="deep_linking: true; one_up: false">
+                    <section>
+                      <p class="title" data-section-title><a href="#panel2nested1">Section 1</a></p>
+                      <div class="content" data-slug="nested1" data-section-content>
+                        <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                      </div>
+                    </section>
+                    <section>
+                      <p class="title" data-section-title><a href="#panel2nested2">Section 2</a></p>
+                      <div class="content" data-slug="nested2" data-section-content>
+                        <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                      </div>
+                    </section>
+                    <div data-section-region class="section">
+                      <p class="title" data-section-title><a href="#panel2nested3">Section 3</a></p>
+                      <div class="content" data-slug="nested3" data-section-content>
+                        <form>
+                          <div class="row collapse">
+                            <div class="large-2 columns">
+                              <label class="inline">Your Name</label>
+                            </div>
+                            <div class="large-10 columns">
+                              <input type="text" id="yourName" placeholder="Jane Smith">
+                            </div>
+                          </div>
+                          <div class="row collapse">
+                            <div class="large-2 columns">
+                              <label class="inline"> Your Email</label>
+                            </div>
+                            <div class="large-10 columns">
+                              <input type="text" id="yourEmail" placeholder="jane@smithco.com">
+                            </div>
+                          </div>
+                          <label>What's up?</label>
+                          <textarea rows="4"></textarea>
+                          <button type="submit" class="radius button">Submit</button>
+                        </form>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </section>
               <div data-section-region class="section">
@@ -950,6 +989,9 @@ $section-content-bg:                #fff;
 $section-vertical-nav-min-width:    emCalc(200px);
 $section-vertical-tabs-title-width: emCalc(200px);
 $section-bottom-margin:             emCalc(20px);
+
+$title-selector: ".title";
+$content-selector: ".content";
 ', :css %>
 
     <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>

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

@@ -53,10 +53,10 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style side nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/side-nav";
+@import "foundation/variables", "foundation/components/global", "foundation/components/side-nav";
 ', :css %>
 
         <h5>Quick Mixin</h5>
@@ -113,7 +113,7 @@ $side-nav-divider-size:      1px;
 $side-nav-divider-style:     solid;
 $side-nav-divider-color:     darken(#fff, 10%);', :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>
+        <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>_variables.scss</strong>.</p>
 
       </div>
     </div>

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

@@ -53,10 +53,10 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="#https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss">_buttons.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/buttons", "foundation/components/split-buttons";
+@import "foundation/variables", "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>
@@ -138,7 +138,7 @@ $split-button-pip-top-lrg:     $button-lrg + emCalc(5px);
 $split-button-pip-left-lrg:    emCalc(-9px);
 ', :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>
+        <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>_variables.scss</strong>.</p>
 
         <hr>
 

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

@@ -47,10 +47,10 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style sub-nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/sub-nav";
+@import "foundation/variables", "foundation/components/global", "foundation/components/sub-nav";
 ', :css %>
 
         <h5>Quick Mixin</h5>
@@ -109,9 +109,9 @@ $sub-nav-active-font-weight: bold;
 $sub-nav-active-bg:          $primary-color;
 $sub-nav-active-color:       #fff;
 $sub-nav-active-padding:     emCalc(3px) emCalc(9px);
-$sub-nav-active-cursor:      default;', :css %>
+$sub-nav-active-cursor:      $cursor-default-value;', :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>
+        <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>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/switch.html.erb

@@ -97,10 +97,10 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style switches. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/switch";
+@import "foundation/variables", "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>
@@ -278,7 +278,7 @@ $switch-negative-color:           #f5f5f5;
 /* Outline Style for tabbing through switches */
 $switch-label-outline:            1px dotted #888;', :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>
+        <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>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/tables.html.erb

@@ -113,7 +113,7 @@ $table-line-height:      emCalc(18px);
 $table-display:          table-cell;
 $table-margin-bottom:    emCalc(20px);', :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>
+        <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>_variables.scss</strong>.</p>
 
 
       </div>

data/docs/components/thumbnails.html.erb

@@ -31,10 +31,10 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/labels";
+@import "foundation/variables", "foundation/components/global", "foundation/components/labels";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/tooltips.html.erb

@@ -35,6 +35,38 @@
           <li><code>tip-right</code>: Align the tip to the right the element you attach it to.</li>
         </ul>
 
+        <h4>Disable for Touch Devices</h4>
+        <p>If you don't want tooltips to interfere with a touch event, you can disable them for those devices. To do this, you'll just need to add a data-option to your tooltip, like so:</p>
+
+<%= code_example '
+<span data-tooltip data-options="disable-for-touch:true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
+', :html %>
+
+        <hr>
+
+        <h4>Available SCSS Variables</h4>
+<%= code_example '
+$has-tip-border-bottom:       dotted 1px #ccc;
+$has-tip-font-weight:         bold;
+$has-tip-font-color:          #333;
+$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
+$has-tip-font-color-hover:    $primary-color;
+$has-tip-cursor-type:         help;
+
+$tooltip-padding:             emCalc(8px);
+$tooltip-bg:                  #000;
+$tooltip-font-size:           emCalc(15px);
+$tooltip-font-weight:         bold;
+$tooltip-font-color:          #fff;
+$tooltip-line-height:         1.3;
+$tooltip-close-font-size:     emCalc(10px);
+$tooltip-close-font-weight:   normal;
+$tooltip-close-font-color:    #888;
+$tooltip-font-size-sml:       emCalc(14px);
+$tooltip-radius:              $global-radius;
+$tooltip-pip-size:            5px;
+', :css %>
+
         <hr>
 
         <h3>Using the Javascript</h3>
@@ -52,13 +84,14 @@
 
         <h5>Optional JavaScript Configuration</h5>
 
-        <p>Tooltip options can only be passed in during initialization at this time.</p>
+        <p>Tooltips now support <code>data-options</code> configuration. You can use this functionality to disable tooltips selectively by defining <code>data-options="disable-for-touch: true"</code> on your tip target.</p>
 
     <%= code_example "
 {
   selector : '.has-tip',
   additionalInheritableClasses : [],
   tooltipClass : '.tooltip',
+  disable-for-touch: false,
   tipTemplate : function (selector, content) {
     return '<span data-selector=\"' + selector + '\" class=\"'
       + Foundation.libs.tooltips.settings.tooltipClass.substring(1)