zurb-foundation 4.1.6 → 4.2.0

data/CONTRIBUTING.md

@@ -31,7 +31,7 @@ Want to test out the Compass templates.  Don't recompile the gem every time, use
 ```bash
 mkdir demo1
 cd demo1
-echo -e 'source :rubygems\n
+echo -e 'source "https://rubygems.org"\n
 gem "zurb-foundation", :path => "/path/to/foundation/repo"\n
 gem "compass"\n' > Gemfile
 bundle exec compass create -r zurb-foundation --using foundation
@@ -48,6 +48,7 @@ bundle exec compass create -r zurb-foundation --using foundation --force
 1. Fork it
 2. Create your feature branch (`git checkout -b my-new-feature`)
 3. Test your changes to the best of your ability.  We've provided a test/ folder, feel free to add to it as necessary.
-4. Commit your changes (`git commit -am 'Added some feature'`)
-5. Push to the branch (`git push origin my-new-feature`)
-6. Create new Pull Request
+4. Update the documentation to reflect your changes if they add or changes current functionality. Run `bundle && bundle exec foreman start` to compile to documentation. Make sure you are in the docs folder before you do this.
+5. Commit your changes (`git commit -am 'Added some feature'`)
+6. Push to the branch (`git push origin my-new-feature`)
+7. Create new Pull Request

data/Gemfile.lock

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

data/README.md

@@ -30,12 +30,15 @@ Many thanks to all the people working on Foundation either to improve the base c
 
 WordPress (Versions marked 3/20/13)
 
+* [Reactor](https://github.com/awtheme/reactor) by Anthony Wilhelm using Foundation version 4
 * [Reverie](http://themefortress.com/reverie/) by Zhen using Foundation version 4
 * [Corner Stone](https://github.com/thewirelessguy/cornerstone) by [Stephen Mullen](https://twitter.com/wirelessguyuk) using Foundation version v4.09
 * [required+ Themes](http://themes.required.ch/) by required+ using Foundation version 3.25
 * [Yeti](https://github.com/modlearning/Yeti) by Modular Learning using Foundation version 3.2
 * [Starter Theme](https://github.com/drewsymo/Foundation) by Drew Morris using Foundation version 3
 * [WP-Foundation](http://320press.com/wp-foundation/features/) by 320press using Foundation version 3
+* [f415](https://github.com/javorszky/f415) by Gabor Javorszky
+* [Narga Core](https://github.com/Narga/narga-core) by Nguyễn Đình Quân
 
 Joomla
 
@@ -48,6 +51,9 @@ Drupal
 * [Zurb Foundation](http://drupal.org/project/zurb-foundation) Supporting F3.2, F4 & Drupal 8  by [Ishmael Sanchez](http://ishmaelsanchez.com), [Chris Lee](http://hire.chrisjlee.net)
 * [Zoundation Theme](http://drupal.org/project/zoundation) by [Andrea Burton](https://twitter.com/andreaburton) & [Jeff Graham](https://twitter.com/jgraham909), FunnyMonkey
 
+Alfred
+* [Foundation Alfred](https://github.com/joshmedeski/foundation-alfred) by Josh Medeski (@joshmedeski)
+
 PyroCMS
 
 * [PyroYeti - PyroCMS Theme](https://github.com/pyrosuit/PyroYeti) by [Arnold Mwumva Ford](https://twitter.com/fordarnold) , Meridian Softech
@@ -70,6 +76,7 @@ Middleman
 
 Magento
 * [Magento & Foundation](https://github.com/nandroid/MagentoFoundation) by Nandroid
+* [Waterlee Boilerplate](https://github.com/zeljkoprsa/waterlee-boilerplate) by Jake Sharp
 
 Python
 * [Pyramid Scaffold](https://github.com/ppinette/pyramid_foundation) by Parker Pinette

data/docs/CHANGELOG.md

@@ -1,3 +1,30 @@
+### 4.2- May 30, 2013
+* Added new Interchange Plugin for handling responsive images.
+* Made a variable for the "sticky" class on the top-bar.
+* Changed media query variables to pixels for better consistency between font sizes.
+* Fixed deep linking for foundation.section.js.
+* Added data-options support to top-bar, you can now include "is_hover: false" to make it clickable.
+* Each dropdown section of the top-bar for mobile now takes on its natural height rather than looking for the tallest and setting them all to that.
+* Added data-options support for tool-tips.
+* Added .large-uncentered for when you only want centered on small screens.
+* Made block-grid spacing more like the normal grid.
+* Fixed confusing comments in visibility classes SCSS file.
+* Added AJAX support to Reveal.
+* Added cursor variables.
+* Fixed various typos in the documentation.
+* Updated CONTRIBUTOR.md to include how to run the docs locally.
+* Added Codekit instructions to documentation.
+* Changed to a better method test for Zepto.
+* Added hover support for dropdowns data-options by including "is_hover: true" to the options.
+* Added the ability to use deep-linking inside nested Sections.
+* Added the ability to use HTML in the data-caption for Clearing.
+* Fixes problem with embedded Youtube videos inside of Reveal.
+* Orbit now has pause/resume on hover/mousout capability.
+* Fixed Section vertical tabs on mobile.
+* Lots of small bug fixes and improvements for many of the JS components.
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.1.6...v4.2.0).
+
 ### 4.1.6- May 6, 2013
 * Improved performance for custom select boxes.
 * Bug fix for switches contained within custom forms.

data/docs/Gemfile

@@ -6,6 +6,8 @@ gem 'foreman'
 gem 'stasis'
 gem 'sass', :require => false
 gem 'coderay'
+gem 'coderay_bash'
+gem 'thin'
 gem 'uglifier'
 
 group :production do

data/docs/Gemfile.lock

@@ -2,7 +2,11 @@ GEM
   remote: https://rubygems.org/
   specs:
     coderay (1.0.9)
+    coderay_bash (1.0.5)
+      coderay (>= 1.0)
+    daemons (1.1.9)
     directory_watcher (1.4.1)
+    eventmachine (1.0.3)
     execjs (1.4.0)
       multi_json (~> 1.0)
     foreman (0.61.0)
@@ -25,6 +29,10 @@ GEM
       tilt (= 1.3.3)
     therubyracer (0.10.2)
       libv8 (~> 3.3.10)
+    thin (1.5.1)
+      daemons (>= 1.0.9)
+      eventmachine (>= 0.12.6)
+      rack (>= 1.0.0)
     thor (0.17.0)
     tilt (1.3.3)
     uglifier (1.3.0)
@@ -36,10 +44,12 @@ PLATFORMS
 
 DEPENDENCIES
   coderay
+  coderay_bash
   foreman
   redcarpet
   sass
   sprockets
   stasis
   therubyracer
+  thin
   uglifier

data/docs/_sidebar-components.html.erb

@@ -89,6 +89,7 @@
       <ul class="side-nav">
         <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 == 'Interchange' ? 'active': '' %>" href="interchange.html">Interchange</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>

data/docs/_sidebar.html.erb

@@ -89,6 +89,7 @@
       <ul class="side-nav">
         <li><a href="components/clearing.html">Clearing</a></li>
         <li><a href="components/dropdown.html">Dropdown</a></li>
+        <li><a href="components/interchange.html">Interchange</a></li>
         <li><a href="components/joyride.html">Joyride</a></li>
         <li><a href="components/magellan.html">Magellan</a></li>
         <li><a href="components/orbit.html">Orbit</a></li>

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

@@ -12,11 +12,16 @@
 
     <div class="row">
       <div class="large-12 columns">
-        <div data-alert class="alert-box radius">
+        <div data-alert class="alert-box">
           This is a standard alert (div.alert-box).
           <a href="" class="close">&times;</a>
         </div>
 
+        <div data-alert class="alert-box radius">
+          This is a radius alert (div.alert-box.radius).
+          <a href="" class="close">&times;</a>
+        </div>
+
         <div data-alert class="alert-box success">
           This is a success alert (div.alert-box.success).
           <a href="" class="close">&times;</a>
@@ -48,10 +53,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/_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>
+        <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/_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/_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/components/global", "foundation/components/alerts";
+@import "foundation/variables", "foundation/components/global", "foundation/components/alerts";
 ', :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/block-grid.html.erb

@@ -54,10 +54,10 @@
         <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>, <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>
+        <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">_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/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/components/global", "foundation/components/block-grid";
+@import "foundation/variables", "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>
@@ -111,7 +111,7 @@ $base-style: true
 <%= code_example '
 /* We use this to control the maximum blocks and spacing */
 $block-grid-elements: 12;
-$block-grid-default-spacing: 10px;
+$block-grid-default-spacing: emCalc(20px);
 
 /* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
 $block-grid-media-queries: true

data/docs/components/breadcrumbs.html.erb

@@ -46,10 +46,10 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <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>
+        <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/_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">_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/components/global", "foundation/components/breadcrumbs";
+@import "foundation/variables", "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>

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

@@ -101,10 +101,10 @@
         <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/_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>
+        <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/_variables.scss">_variables.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/components/global", "foundation/components/buttons", "foundation/components/button-groups";
+@import "foundation/variables", "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

@@ -66,10 +66,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="../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>
+        <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/_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/_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/components/global", "foundation/components/buttons";
+@import "foundation/variables", "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>
@@ -208,7 +208,7 @@ $button-radius:           $global-radius;
 $button-disabled-opacity: 0.6;
 ', :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/clearing.html.erb

@@ -52,20 +52,20 @@
         <hr>
 
         <h4>Start From a Featured Image</h4>
-        <p>Sometimes you don't want to show a gallery full of images on your site, but you want to open the gallery from a single image. By including all of your images in the list and using <code>.clearing-feature</code> on the <code>&lt;li&gt;</code> of your choice, you'll be able to hide the rest of the images in the on-page gallery. If you want to show more than once, try using our <code>.hide</code> class to set the ones you don't want to <code>display: none;</code>.</p>
+        <p>Sometimes you don't want to show a gallery full of images on your site, but you want to open the gallery from a single image. By including all of your images in a <code>.clearing-feature</code> list and using <code>.clearing-featured-img</code> on the <code>&lt;li&gt;</code> of your choice, you'll be able to hide the rest of the images in the on-page gallery. If you want to show more than once, try using our <code>.hide</code> class to set the ones you don't want to <code>display: none;</code>.</p>
 
 <%= code_example '
-<ul class="clearing-thumbs" data-clearing>
-  <li class="clearing-feature"><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+<ul class="clearing-thumbs clearing-feature" data-clearing>
   <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li class="clearing-featured-img"><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
   <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
 </ul>', :html %>
 
         <div class="row">
           <div class="large-12 columns">
-            <ul class="clearing-thumbs" data-clearing>
-              <li class="clearing-feature"><a class="th" href="../img/demos/demo1.jpg"><img src="../img/demos/demo1-th.jpg"></a></li>
-              <li><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
+            <ul class="clearing-thumbs clearing-feature" data-clearing>
+              <li><a class="th" href="../img/demos/demo1.jpg"><img src="../img/demos/demo1-th.jpg"></a></li>
+              <li class="clearing-featured-img"><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
               <li><a class="th" href="../img/demos/demo3.jpg"><img src="../img/demos/demo3-th.jpg"></a></li>
             </ul>
           </div>
@@ -76,6 +76,7 @@
         <h4>Including Captions</h4>
         <p>Another common use-case for Lightboxes is to include a caption per image. We've made this quick and easy by using data-attributes to hold the content. You'll just attach this attribute to the image it belongs to and voila!</code> Here's the code example:</p>
 
+        <p><strong>Note:</strong> You can now use HTML inside the data-caption attribute.</p>
 <%= code_example '
 <ul class="clearing-thumbs" data-clearing>
   <li><a href="path/to/your/img"><img data-caption="caption here..." src="path/to/your/img-th"></a></li>

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

@@ -15,6 +15,7 @@
       <div class="large-12 columns">
 
         <form class="custom">
+
           <div class="row">
             <div class="large-4 columns">
               <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>

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

@@ -54,10 +54,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="../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>
+        <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/_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/_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/components/global", "foundation/components/buttons", "foundation/components/dropdown-buttons";
+@import "foundation/variables", "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>
@@ -145,7 +145,7 @@ $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
 $dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px);
 ', :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/dropdown.html.erb

@@ -54,13 +54,25 @@
 
         <p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>dropdowns from a custom package</strong>. These should be linked up following our default <a href="../index.html#basicHTMLMarkup">HTML page structure</a>.</p>
 
+        <h5>Hoverable Dropdown Option</h5>
+        <p>If you'd rather have your dropdown be accessible by hover you can add a data-option to the target element:</p>
+
+<%= code_example '
+<a href="#" data-dropdown="drop1" data-options="is_hover:true">Has Dropdown</a>
+
+<ul id="drop1" class="f-dropdown" data-dropdown-content>
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>', :html %>
+
         <hr>
 
         <h3>Build With Our Mixins</h3>
-        <p>We've included SCSS mixins used to style dropdowns. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+        <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/_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/_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/components/global", "foundation/components/dropdown";
+@import "foundation/variables", "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>
@@ -133,9 +145,13 @@ $f-dropdown-font-color:           #555;
 $f-dropdown-font-size:            emCalc(14px);
 $f-dropdown-list-padding:         emCalc(5px) emCalc(10px);
 $f-dropdown-line-height:          emCalc(18px);
-$f-dropdown-list-hover-bg:        #eeeeee;', :css %>
+$f-dropdown-list-hover-bg:        #eeeeee;
+$dropdown-mobile-default-float:   0;
+
+/* We use this to control the styles for when the dropdown has custom content. */
+$f-dropdown-content-padding:      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>
 
       <hr>
 

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

@@ -52,10 +52,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/_flex-video.scss">_flex-video.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_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/_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/components/global" "foundation/components/flex-video";
+@import "foundation/variables", "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>
@@ -84,7 +84,7 @@ $flex-video-margin-bottom:             emCalc(16px);
 $flex-video-widescreen-padding-bottom: 57.25%;
 ', :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/forms.html.erb

@@ -213,7 +213,7 @@
         <hr>
 
         <h4>Pre/Postfix Labels &amp; Actions</h4>
-        <p>Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use <code>&lt;row class="collapse"&gt;</code> to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix <code>&lt;span class="postfix"&gt;</code> or <code>&lt;span class="prefix"&gt;</code>. Here are a few examples:</p>
+        <p>Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use <code>&lt;div class="row collapse"&gt;</code> to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix <code>&lt;span class="postfix"&gt;</code> or <code>&lt;span class="prefix"&gt;</code>. Here are a few examples:</p>
 
 <%= code_example '
 <form>
@@ -329,10 +329,10 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-       <p>A lot of elements in Foundation can be created using SCSS mixins so that you can include your own classes and just enough style as needed for the job at hand. To use these mixins, you'll need to have the extension installed or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <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>
+       <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/_variables.scss">_variables.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/components/global", "foundation/components/buttons", "foundation/components/forms";', :css %>
+@import "foundation/variables", "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>
@@ -463,11 +463,11 @@ $input-error-message-font-color-alt: #333;
 
 +/* We use this to style the glowing effect of inputs when focused */
 +$glowing-effect-fade-time:           0.45s !default;
-+$glowing-effect-color:               $input-focus-border-color !default; 
++$glowing-effect-color:               $input-focus-border-color !default;
 
 ', :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>
   </div>

data/docs/components/global.html.erb

@@ -10,7 +10,236 @@
 
         <hr>
 
-<%= code_example "
+<%= code_example '
+/* Global Foundation Mixins */
+
+/* We use this to control border radius. */
+@mixin radius($radius:$global-radius) {
+  @if $radius {
+    @if $experimental {
+      -webkit-border-radius: $radius;
+    }
+    border-radius: $radius;
+  }
+}
+
+/* We use this to create equal side border radius on elements. */
+@mixin side-radius($side, $radius) {
+  @if $side == left {
+    @if $experimental {
+      -moz-border-radius-bottomleft: $radius;
+      -moz-border-radius-topleft: $radius;
+      -webkit-border-bottom-left-radius: $radius;
+      -webkit-border-top-left-radius: $radius;
+    }
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
+  }
+  @else if $side == right {
+    @if $experimental {
+      -moz-border-radius-topright: $radius;
+      -moz-border-radius-bottomright: $radius;
+      -webkit-border-top-right-radius: $radius;
+      -webkit-border-bottom-right-radius: $radius;
+    }
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+  @else if $side == top {
+    @if $experimental {
+      -moz-border-radius-topright: $radius;
+      -moz-border-radius-topleft: $radius;
+      -webkit-border-top-right-radius: $radius;
+      -webkit-border-top-left-radius: $radius;
+    }
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
+  }
+  @else if $side == bottom {
+    @if $experimental {
+      -moz-border-radius-bottomright: $radius;
+      -moz-border-radius-bottomleft: $radius;
+      -webkit-border-bottom-right-radius: $radius;
+      -webkit-border-bottom-left-radius: $radius;
+    }
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+}
+
+/* We can control whether or not we have inset shadows edges. */
+@mixin inset-shadow($active:true) {
+  @if $experimental {
+    -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
+  }
+  box-shadow: $shiny-edge-size $shiny-edge-color inset;
+
+  @if $active { &:active {
+    @if $experimental {
+      -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+    }
+    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
+}
+
+/* We use this to add transitions to elements */
+@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
+  @if $experimental {
+    -webkit-transition: $property $speed $ease;
+    -moz-transition: $property $speed $ease;
+  }
+  transition: $property $speed $ease;
+}
+
+/* We use this to add box-sizing across browser prefixes */
+@mixin box-sizing($type:border-box) {
+  @if $experimental {
+    -moz-box-sizing: $type;
+    -webkit-box-sizing: $type;
+  }
+  box-sizing: $type;
+}
+
+/* We use this to create equilateral triangles */
+@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: inset $triangle-size;
+  @if ($triangle-direction == top) {
+    border-color: $triangle-color transparent transparent transparent;
+    border-top-style: solid;
+  }
+  @if ($triangle-direction == bottom) {
+    border-color: transparent transparent $triangle-color transparent;
+    border-bottom-style: solid;
+  }
+  @if ($triangle-direction == left) {
+    border-color: transparent transparent transparent $triangle-color;
+    border-left-style: solid;
+  }
+  @if ($triangle-direction == right) {
+    border-color: transparent $triangle-color transparent transparent;
+    border-right-style: solid;
+  }
+}
+
+/* We use this to do clear floats */
+@mixin clearfix() {
+  *zoom:1;
+  &:before, &:after { content: " "; display: table; }
+  &:after { clear: both; }
+}
+
+
+/* We use this to add a glowing effect to block elements */
+@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
+  @if $experimental {
+    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
+    -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
+  }
+  transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
+
+  &:#{$selector} {
+    @if $experimental {
+      -webkit-box-shadow: 0 0 5px $glowing-effect-color;
+      -moz-box-shadow: 0 0 5px $glowing-effect-color;
+    }
+    box-shadow: 0 0 5px $glowing-effect-color;
+    border-color: $glowing-effect-color;
+  }
+}
+
+
+/* Foundation Variables */
+
+/* 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. */
+
+/* Since the typical default browser font-size is 16px, that makes the calculation for grid size. */
+/* If you want your base font-size to be different and not have it effect the grid breakpoints, */
+/* set $em-base to $base-font-size and make sure $base-font-size is a px value. */
+$base-font-size: 100% !default;
+
+/* $base-line-height is 24px while $base-font-size is 16px */
+$base-line-height: 150% !default;
+
+/* This is the default html and body font-size for the base em value. */
+$em-base: 16px !default;
+
+/* Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) */
+@function emCalc($pxWidth) {
+  @return $pxWidth / $em-base * 1em;
+}
+
+/* Maybe you want to create rems and pixels */
+/* @function remCalc($pxWidth) { */
+/*   @return $pxWidth / $em-base * 1rem; */
+/* } */
+
+/* We use these to control various global styles */
+$body-bg: #fff !default;
+$body-font-color: #222 !default;
+$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-weight: normal !default;
+$body-font-style: normal !default;
+
+/* We use this to control font-smoothing */
+$font-smoothing: subpixel-antialiased !default;
+
+/* We use these to control text direction settings */
+$text-direction: ltr !default;
+
+/* NOTE: No need to change this conditional statement, $text-direction variable controls it all. */
+$default-float: left !default;
+$opposite-direction: right !default;
+@if $text-direction == ltr {
+  $default-float: left;
+  $opposite-direction: right;
+} @else {
+  $default-float: right;
+  $opposite-direction: left;
+}
+
+/* We use these as default colors throughout */
+$primary-color: #2ba6cb !default;
+$secondary-color: #e9e9e9 !default;
+$alert-color: #c60f13 !default;
+$success-color: #5da423 !default;
+
+/* We use these to make sure border radius matches unless we want it different. */
+$global-radius: 3px !default;
+$global-rounded: 1000px !default;
+
+/* We use these to control inset shadow shiny edges and depressions. */
+$shiny-edge-size: 0 1px 0 !default;
+$shiny-edge-color: rgba(#fff, .5) !default;
+$shiny-edge-active-color: rgba(#000, .2) !default;
+
+/* We use this to control whether or not CSS classes come through in the gem files. */
+$include-html-classes: true !default;
+$include-print-styles: true !default;
+$include-html-global-classes: $include-html-classes !default;
+
+/* Media Queries */
+$small-screen: 768px !default;
+$medium-screen: 1280px !default;
+$large-screen: 1440px !default;
+
+$screen: "only screen" !default;
+$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;
+$landscape: "only screen and (orientation: landscape)" !default;
+$portrait: "only screen and (orientation: portrait)" !default;
+
+/* We use this as cursors values for enabling the option of having custom cursors */
+$cursor-crosshair-value: crosshair !default;
+$cursor-default-value: default !default;
+$cursor-pointer-value: pointer !default;
+$cursor-help-value: help !default;
+$cursor-text-value: text !default;
+
 /* Set box-sizing globally to handle padding and border widths */
 *,
 *:before,
@@ -32,9 +261,12 @@ body {
   font-style: $body-font-style;
   line-height: 1;
   position: relative;
+  cursor: $cursor-default-value;
 }
 
-/* Override outline from normalize, we don't like it */
+a:hover { cursor: $cursor-pointer-value; }
+
+/* Override outline from normalize, we do not like it */
 a:focus { outline: none; }
 
 /* Grid Defaults to get images and embeds to work properly */
@@ -77,7 +309,7 @@ textarea { height: auto; min-height: 50px; }
 
 /* Make select elements 100% width by default */
 select { width: 100%; }
-", :css %>
+', :css %>
 
       </div>
     </div>