zurb-foundation 4.3.0 → 4.3.1

data/.gitignore

@@ -3,6 +3,7 @@
 .bundle
 .config
 .yardoc
+.idea
 InstalledFiles
 _yardoc
 coverage

data/Gemfile.lock

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

data/README.md

@@ -53,6 +53,7 @@ Drupal
 * [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
@@ -77,13 +78,17 @@ Middleman
 * [Middleman Foundation 4.x Template](https://github.com/mattolson/middleman-zurb-template) by [Matt Olson](http://mattolson.com)
 
 Magento
+
 * [Magento & Foundation](https://github.com/nandroid/MagentoFoundation) by Nandroid
 * [Waterlee Boilerplate](https://github.com/zeljkoprsa/waterlee-boilerplate) by Jake Sharp
 
-Metoer
+Meteor
+
 * [Meteor Package for Foundation](https://atmosphere.meteor.com/package/foundation) by Eric Wallace
+* [Foundation Smart Package](https://atmosphere.meteor.com/package/zurb-foundation)
 
 Python
+
 * [Pyramid Scaffold](https://github.com/ppinette/pyramid_foundation) by Parker Pinette
 
 CodeIgniter
@@ -94,7 +99,7 @@ Shopify
 
 * [Foundationify Shopify Theme](https://github.com/lukebussey/foundationify) by Luke Bussey
 
-Silverstripe
+SilverStripe
 
 * [Foundation Silverstripe Theme](https://github.com/ryanwachtl/silverstripe-foundation) by [Ryan Wachtl](https://github.com/ryanwachtl)
 
@@ -125,7 +130,7 @@ Grid Generator
 
 * [Experimental Grid Generator](http://www.gridlover.net/foundation/) courtesy of [Ville Vanninen](http://foolproof.me)
 
-Grid displayer
+Grid Displayer
 
 * [Grid displayer bookmarklet](http://alefeuvre.github.com/foundation-grid-displayer/) by [Antoine Lefeuvre](http://twitter.com/jiraisurfer)
 * [Responsive Design Bookmarklet](http://responsive.victorcoulon.fr/) by [Victor Coulon](https://twitter.com/_victa)
@@ -144,11 +149,6 @@ Yeoman Generator
 * [Yeoman 1.0-Foundation 4](https://github.com/lkbgift/foundation4-yeoman) by [Leonard Bogdonoff](http://twitter.com/lkbcc)
 * [Yeoman-Foundation](https://npmjs.org/package/yeoman-foundation) by Vincent Mac
 
-Meteor
-
-* [Foundation Smart Package](https://atmosphere.meteor.com/package/zurb-foundation)
-
-
 MIT Open Source License
 =======================
 

data/docs/CHANGELOG.md

@@ -1,10 +1,18 @@
+### 4.3.1- July 23, 2013
+* Fixes RTL animation issues in Orbit
+* Addresses error class conflicts between Abide and general form styles
+* Bug fixes
+
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.3.0...v4.3.1).
+
 ### 4.3- July 18, 2013
 * Added [Abide](http://foundation.zurb.com/docs/components/abide.html), our new form validation plugin that works with simple data-attributes.
 * Rewrote Orbit to include previous options and animations. We also made it possible to have variable height slides and separate animations.
 * Top Bar JS updates to fix a scrollTop bug
 * Fixed a positioning bug in custom forms when using the collapsed option
 * Added custom section to custom forms
-* Updated Interchance to support absolute URLs
+* Updated Interchange to support absolute URLs
 * Updated the emCalc to be used unitlessly and with multiple values
 * Created an early "opt-in" grid that we've built for Foundation 5. This includes 2 breakpoints and three grids (small, medium, large). Use this to start planning ahead to Foundation 5.
 * Fixed a bug with Section deep linking in nested content

data/docs/Gemfile

@@ -5,11 +5,14 @@ gem 'sprockets'
 gem 'foreman'
 gem 'stasis'
 gem 'sass', :require => false
-gem 'coderay'
-gem 'coderay_bash'
+gem 'rouge'
 gem 'thin'
 gem 'uglifier'
 
+group :development do
+  gem 'capistrano'
+end
+
 group :production do
   gem 'therubyracer'
 end

data/docs/Gemfile.lock

@@ -1,9 +1,12 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    coderay (1.0.9)
-    coderay_bash (1.0.5)
-      coderay (>= 1.0)
+    capistrano (2.15.4)
+      highline
+      net-scp (>= 1.0.0)
+      net-sftp (>= 2.0.0)
+      net-ssh (>= 2.0.14)
+      net-ssh-gateway (>= 1.1.0)
     daemons (1.1.9)
     directory_watcher (1.4.1)
     eventmachine (1.0.3)
@@ -11,11 +14,21 @@ GEM
       multi_json (~> 1.0)
     foreman (0.61.0)
       thor (>= 0.13.6)
+    highline (1.6.19)
     hike (1.2.1)
     libv8 (3.3.10.4)
     multi_json (1.6.1)
+    net-scp (1.1.1)
+      net-ssh (>= 2.6.5)
+    net-sftp (2.1.2)
+      net-ssh (>= 2.6.5)
+    net-ssh (2.6.7)
+    net-ssh-gateway (1.2.0)
+      net-ssh (>= 2.6.5)
     rack (1.5.2)
     redcarpet (2.2.2)
+    rouge (0.3.9)
+      thor
     sass (3.2.6)
     slop (3.3.2)
     sprockets (2.9.0)
@@ -33,7 +46,7 @@ GEM
       daemons (>= 1.0.9)
       eventmachine (>= 0.12.6)
       rack (>= 1.0.0)
-    thor (0.17.0)
+    thor (0.18.1)
     tilt (1.3.3)
     uglifier (1.3.0)
       execjs (>= 0.3.0)
@@ -43,10 +56,10 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  coderay
-  coderay_bash
+  capistrano
   foreman
   redcarpet
+  rouge
   sass
   sprockets
   stasis

data/docs/changelog.html.erb

@@ -3,7 +3,7 @@
     <%= render "_sidebar.html.erb" %>
   </div>
 
-  <div class="large-9 columns">
+  <div id="changelog" class="large-9 columns">
 
     <% @page_title = "Changelog" %>
     <h2><%= @page_title %></h2>

data/docs/components/abide.html.erb

@@ -167,7 +167,7 @@
             </tr>
             <tr>
               <td>card</td>
-              <td>visa, ames, mastercard</td>
+              <td>visa, amex, mastercard</td>
             </tr>
             <tr>
               <td>cvv</td>
@@ -250,7 +250,7 @@ $(document)
       dashes_only: /^[0-9-]*$/,
       ip_address: /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/
     }
-  })
+  });
 ", :js %>
         
         <p>You can then use these custom patterns like you would the predfined patterns in your markup:</p>
@@ -292,7 +292,7 @@ $(document)
 
         <h3>Events</h3>
 
-        <p>If a submit event is fired, a <code>valid</code> event is fired if the form is valid and an <code>invalid</code> event is fired if the form is invalid.</p>
+        <p>If a submit event is fired, a <code>valid</code> event is triggered if the form is valid and an <code>invalid</code> event is triggered if the form is invalid.</p>
 
         <p>You can bind to these events and fire your own callback:</p>
 

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

@@ -56,7 +56,9 @@
         <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/variables", "foundation/components/global", "foundation/components/alert-boxes";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/alert-boxes";
 ', :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

@@ -57,8 +57,10 @@
         <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/variables", "foundation/components/global", "foundation/components/block-grid";
-', :css %>
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/block-grid";
+', :sass %>
 
         <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>
 
@@ -87,7 +89,7 @@ $spacing: $block-grid-default-spacing
 /* This controls whether or not base styles come through, set to false to leave out */
 /* This is handy for when you create multiple block-grids and want less CSS output repetition */
 $base-style: true
-', :css %>
+', :scss %>
 
         <ul class="small-block-grid-5">
           <li><img src="../img/demos/demo1.jpg"></li>
@@ -102,7 +104,7 @@ $base-style: true
 
 <%= code_example '
 .your-small-class-name > li { clear: none !important; }
-', :css %>
+', :scss %>
 
         <p><strong>Note:</strong> If you are using the same class across breakpoints, your mixin should override this and you won't need it. If you want to control the layout using different classes, use the above snippet.</p>
 
@@ -115,7 +117,7 @@ $block-grid-default-spacing: emCalc(20);
 
 /* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
 $block-grid-media-queries: true
-', :css %>
+', :scss %>
 
       </div>
     </div>

data/docs/components/breadcrumbs.html.erb

@@ -49,7 +49,9 @@
         <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/variables", "foundation/components/global", "foundation/components/breadcrumbs";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "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

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

data/docs/components/buttons.html.erb

@@ -69,7 +69,9 @@
         <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/variables", "foundation/components/global", "foundation/components/buttons";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "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>
@@ -202,7 +204,6 @@ $button-function-factor: 10%;
 /* We use these to control button border styles. */
 $button-border-width: 1px;
 $button-border-style: solid;
-$button-border-color: darken($primary-color, $button-function-factor);
 
 /* We use this to set the default radius used throughout the core. */
 $button-radius: $global-radius;

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

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

data/docs/components/dropdown.html.erb

@@ -94,8 +94,10 @@
         <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/variables", "foundation/components/global", "foundation/components/dropdown";
-', :css %>
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/dropdown";
+', :sass %>
 
         <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>
 
@@ -125,7 +127,7 @@ $triangle: true
 /* By default, the dropdown is 200px max-width, taking on 100% when gets smaller than that. */
 /* You can set this to any number you want or change it globally with the variable. */
 $max-width: $f-dropdown-max-width
-', :css %>
+', :sass %>
 
         <h5>The List Style Mixin</h5>
         <p>For content dropdowns, we don't add any extra style to the inside of the dropdown other than padding around the edges. For link lists, we wanted to predefined style that would look good out of the box and match the style of our custom select dropdowns. The style mixin looks like this:</p>
@@ -137,7 +139,7 @@ $max-width: $f-dropdown-max-width
 
   li { @include dropdown-style; }
 }
-', :css %>
+', :sass %>
 
         <h5>Default SCSS Variables</h5>
 

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

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

data/docs/components/grid.html.erb

@@ -311,7 +311,7 @@ $behavior: collapse
 
 /* If you have a nested row and want it to be collapsed, you need to add this option */
 $behavior: nest-collapse
-', :css %>
+', :scss %>
 
 <%= code_example '
 /* Mixin options creating columns, these must be nested inside or a row */
@@ -344,13 +344,13 @@ $collapse: false
 /* By default, we include float: left. */
 /* To help control this, we made it an option. Set this to false to not include those styles. */
 $float: left
-', :css %>
+', :scss %>
 
 <%= code_example '
 #masthead { @include grid-row; @include panel;
   & > hgroup { @include grid-column(4); }
   & > section { @include grid-column(8); }
-}', :css %>
+}', :scss %>
 
         <header id="masthead">
           <hgroup>
@@ -368,7 +368,7 @@ $float: left
 $row-width: emCalc(1000);
 $column-gutter: emCalc(30);
 $total-columns: 12 !default;
-', :css %>
+', :scss %>
 
         <hr>
 

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

@@ -44,7 +44,9 @@
         <p>We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_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/_inline-lists.scss">_inline-lists.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
-@import "foundation/variables", "foundation/components/global", "foundation/components/inline-lists";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/inline-lists";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/keystrokes.html.erb

@@ -31,7 +31,9 @@
         <p>We've included SCSS mixins used to style keystrokes. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_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/_keystrokes.scss">_keystrokes.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
-@import "foundation/variables", "foundation/components/global", "foundation/components/keystrokes";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/keystrokes";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/kitchen-sink.html.erb

@@ -1,4 +1,4 @@
-<div class="row">
+<div id="kitchen-sink" class="row">
   <div class="large-12 columns">
     <div class="row">
       <div class="large-12 columns">
@@ -102,21 +102,26 @@
         <hr>
 
         <h4>Dropdown Buttons</h4>
+        <ul id="drop" class="f-dropdown content" 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>
 
         <a href="#" data-dropdown="drop" class="tiny button dropdown">Dropdown Button</a><br>
-        <a href="#" data-dropdown="drop2" class="small secondary radius button dropdown">Dropdown Button</a><br>
-        <a href="#" data-dropdown="drop3" class="button alert round dropdown">Dropdown Button</a><br>
-        <a href="#" data-dropdown="drop4" class="large success button dropdown">Dropdown Button</a><br>
-        <a href="#" data-dropdown="drop5" class="large button dropdown expand">Dropdown Button</a>
+        <a href="#" data-dropdown="drop" class="small secondary radius button dropdown">Dropdown Button</a><br>
+        <a href="#" data-dropdown="drop" class="button alert round dropdown">Dropdown Button</a><br>
+        <a href="#" data-dropdown="drop" class="large success button dropdown">Dropdown Button</a><br>
+        <a href="#" data-dropdown="drop" class="large button dropdown expand">Dropdown Button</a>
 
         <hr>
 
         <h4>Split Buttons</h4>
 
         <a href="#" class="tiny button split">Split Button <span data-dropdown="drop"></span></a><br>
-        <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop2"></span></a><br>
-        <a href="#" class="button alert round split">Split Button <span data-dropdown="drop3"></span></a><br>
-        <a href="#" class="large success button split">Split Button <span data-dropdown="drop4"></span></a>
+        <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop"></span></a><br>
+        <a href="#" class="button alert round split">Split Button <span data-dropdown="drop"></span></a><br>
+        <a href="#" class="large success button split">Split Button <span data-dropdown="drop"></span></a>
 
         <hr>