Merge remote-tracking branch 'upstream/master' into stylus

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

README.md

@@ -37,12 +37,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
 
@@ -55,6 +58,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
@@ -77,6 +83,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

docs/CHANGELOG.md

@@ -1,3 +1,8 @@
+<!-- 
+### 4.1.7- May 9, 2013
+* Added .clearing-featured-img class to designate the featured image in a .clearing-feature list 
+-->
+
 ### 4.1.6- May 6, 2013
 * Improved performance for custom select boxes.
 * Bug fix for switches contained within custom forms.

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

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

docs/components/alert-boxes.html.erb

@@ -48,10 +48,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>

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

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>

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>

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>

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>

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>

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>