zurb-foundation 4.2.0 → 4.2.1

data/Gemfile.lock

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

data/docs/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 4.2.1- May 31, 2013
+* Add missing `$experimental` Sass variable
+* Bug fixes for top bar in mobile view
+* Retina is now default media query
+* Removes incompatible Zepto function used in custom forms
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.2.0...v4.2.1).
+
 ### 4.2- May 30, 2013
 * Added new Interchange Plugin for handling responsive images.
 * Made a variable for the "sticky" class on the top-bar.

data/docs/components/interchange.html.erb

@@ -13,16 +13,18 @@
 
     <div class="row">
       <div class="large-12 columns">
-        <p><img src="../img/demos/interchange/default.jpg" data-interchange="[../img/demos/interchange/default.jpg, (default)], [../img/demos/interchange/smallest.jpg, (screen and (max-width: 568px))], [../img/demos/interchange/small.jpg, (small)], [../img/demos/interchange/med.jpg, (medium)], [../img/demos/interchange/large.jpg, (large)]"></p>
+        <p><img style="width: 100%;" src="../img/demos/interchange/smallest.jpg" data-interchange="[../img/demos/interchange/smallest.jpg, (default)], [../img/demos/interchange/smallest.jpg, (screen and (max-width: 568px))], [../img/demos/interchange/small.jpg, (small)], [../img/demos/interchange/med.jpg, (medium)], [../img/demos/interchange/large.jpg, (large)]"></p>
 
         <h3>Using <code>data-interchange</code></h3>
-        <p>The Foundation Interchange component utilizes the <code>data-interchange</code> attribute for specifying your media queries and respect images.</p>
+        <p>The Foundation Interchange component utilizes the <code>data-interchange</code> attribute for specifying your media queries and their respective images.</p>
 
 <%= code_example '
+<img src="/path/to/default.jpg" data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">
+<!-- or your own queries -->
 <img src="/path/to/default.jpg" data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">
 ', :html %>
 
-        <p>Each rule passed to <code>data-interchange</code> is comma delimited and incapsulated in square brackets, and each argument within a rule is also comma delimited. The first parameter is the path to your image, and the second parameter is your media query, surrounded by parenthesis.</p>
+        <p>Each rule passed to <code>data-interchange</code> is comma delimited and encapsulated in square brackets, and each argument within a rule is also comma delimited. The first parameter is the path to your image, and the second parameter is your media query, surrounded by parenthesis.</p>
 
 <%= code_example '
 data-interchange="[image_path, (media query)], [image_path, (media query)]"
@@ -30,6 +32,13 @@ data-interchange="[image_path, (media query)], [image_path, (media query)]"
 
         <p><strong>The last rule that evaluates to true will be the image that gets loaded.</strong> We recommend that you set your image <code>src</code> to the smallest one, as this will always get loaded.</p>
 
+        <h4>Using Retina Images</h4>
+        <p>You can easily include retina images by using a pixel-density media query for that image. You can even combine multiple parameters in the media query if need be. The retina media query would look something like this, but you can also use dpi or other pixel densities as well:</p>
+
+<%= code_example '
+data-interchange="[image_path, (screen and only (min-width: 640px) and (-webkit-min-device-pixel-ratio: 2))]"
+', :html %>
+
         <h3>Named Queries</h3>
 
         <p>Interchange has a few built-in shortcuts that correlate with our visibility classes.</p>
@@ -66,6 +75,16 @@ data-interchange="[image_path, (media query)], [image_path, (media query)]"
               <td>portrait</td>
               <td><code>only screen and (orientation: portrait)</code></td>
             </tr>
+            <tr>
+              <td>retina <small>(4.2.1)</small></td>
+              <td><code>only screen and (-webkit-min-device-pixel-ratio: 2),<br>
+                only screen and (min--moz-device-pixel-ratio: 2),<br>
+                only screen and (-o-min-device-pixel-ratio: 2/1),<br>
+                only screen and (min-device-pixel-ratio: 2),<br>
+                only screen and (min-resolution: 192dpi),<br>
+                only screen and (min-resolution: 2dppx)</code>
+              </td>
+            </tr>
           </tbody>
         </table>
 
@@ -77,7 +96,7 @@ data-interchange="[image_path, (large)], [image_path, (landscape)]"
 
         <h3>Custom Named Queries</h3>
 
-        <p>Custom queries can be defined during initialization. You can also override the default queries in this way:</p>
+        <p>Custom queries can be defined during initialization and are an easy way to make your queries more readable. You can also override the default queries in this way:</p>
 
 <%= code_example "
 $(document).foundation('interchange', {
@@ -89,7 +108,7 @@ $(document).foundation('interchange', {
 
         <h3>Events</h3>
 
-        <p>Interchange triggers a <code>replace</code> event when a rule evaluates to true and the image has been replaced.</p>
+        <p>Interchange triggers a <code>replace</code> event when a rule evaluates to true and the image has been replaced. This can be useful when you want to change some styles on your page based on which image is loaded.</p>
 
 <%= code_example "
 $(document).on('replace', 'img', function (e, new_path, original_path) {

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

@@ -209,7 +209,7 @@
       <a name="clickable"></a>
       <h4>Clickable Topbar</h4>
       <p>You can now make the top bar clickable by adding a data-attribute to the nav element. Here's an example:</p>
-      <nav class="top-bar" data-options="is_hover:false">
+      <nav class="top-bar">
         <ul class="title-area">
           <!-- Title Area -->
           <li class="name">

data/docs/config/deploy.rb

@@ -14,9 +14,9 @@ set :bundle_gemfile, "docs/Gemfile"
 set :scm, :git
 
 foundation1_ip = '166.78.3.108'
-foundation2_ip = '166.78.18.29'
+#foundation2_ip = '166.78.18.29'
 
-role :web, foundation1_ip, foundation2_ip
+role :web, foundation1_ip
 
 after "deploy:update_code", "deploy:generate_static_site"
 set :keep_releases, 3
@@ -33,4 +33,4 @@ namespace :deploy do
 
 end
 
-require "bundler/capistrano"
+require "bundler/capistrano"

data/docs/index.html.erb

@@ -128,7 +128,7 @@
       </div>
       <div class="large-4 columns end">
         <dl>
-          <dt><h5><a href="components/dropdown.html">Interchange</a></h5></dt>
+          <dt><h5><a href="components/interchange.html">Interchange</a></h5></dt>
           <dd>This plugin let's you load up the appropriate size image based on media queries that you define.</dd>
         </dl>
       </div>

data/docs/sass.html.erb

@@ -145,20 +145,22 @@
         <li>run <span class="keystroke">rails g foundation:install</span></li>
     </ol>
 
-    <!-- <h5>Upgrading Foundation Compass projects</h5>
-    <p><strong>Javascript and Image Updates:</strong> If you already added Foundation to your Compass project or created the project using Foundation in the first place and just want to copy over any updated javascripts/image assets to your project, use the provided <kbd>foundation/upgrade</kbd> pattern below:</p>
+    <h5>Upgrading Foundation Compass projects</h5>
+    <p><strong>Javascript Updates:</strong> If you already added Foundation to your Compass project or created the project using Foundation in the first place and just want to copy over any updated javascripts/image assets to your project, use the provided <kbd>foundation/upgrade</kbd> pattern below:</p>
     <ol style="margin-left: 20px;">
       <li><span class="keystroke">cd /path/to/your-project</span></li>
-      <li>run <span class="keystroke">compass install -r zurb-foundation foundation/upgrade force</span></li>
+      <li>run <span class="keystroke">compass install -r zurb-foundation foundation/upgrade --force</span></li>
     </ol>
 
     <p><strong>Settings file updates:</strong> You can also upgrade Foundation as a whole, which will override the existing Foundation styles and your settings file. So if you've made changes to your settings file and want to make sure your project is on the latest version of Foundation, make sure you backup your settings file before you begin. Alternatively, you can copy/paste the settings from our file and <strong>@import</strong> your own so they don't get erased.</p>
+
     <p>We also recommend creating a <code>foundation-overrides.scss</code> file that you can use for your own specific styles. This will ensure that your styles don't get obliterated upon updating. <strong>We do not recommend directly editing the Foundation files if you plan to upgrade.</strong> To update you project, use the following steps:</p>
+
     <ol style="margin-left: 20px;">
       <li>Make sure you've updated your system version of the gem or upgrading won't work.</li>
       <li><span class="keystroke">cd /path/to/your-project</span></li>
       <li>run <span class="keystroke">compass install -r zurb-foundation foundation</span></li>
-    </ol> -->
+    </ol>
 
     <hr>
 
@@ -1499,38 +1501,33 @@ $topbar-sticky-class:                  ".sticky";
 ', :css %>
 
 
-    <!-- <a name="gui-apps"></a>
+    <a name="gui-apps"></a>
     <h3>Working with GUI applications</h3>
     <h5 class="subheader">We want you to be able to work with Foundation in whatever way you are comfortable and we realize that not all of us are Terminal ninjas. Here's a rundown of some of the popular GUI applications and how to utilize Foundation with them.</h5>
 
     <h5>CodeKit Project</h5>
-    <p>We're using a version of Sass and Compass that doesn't come with CodeKit. This means that you'll need to do a couple steps in order to get everything to compile correctly:</p>
+    <p>To work with Codekit, you'll just need to open it up and create a new Foundation project.</p>
     <ol style="margin-left: 20px;">
-      <li>First things first, make sure you have the gem installed.</li>
-      <li>Run <kbd>[sudo] gem environment</kbd> in the command line, note your gem executables path.</li>
-      <li>Go into <strong>Codekit prefs</strong>, click on <strong>Sass/Scss</strong></li>
-      <li>Click on <strong>"Use the Sass executable at this path:"</strong></li>
-      <li>Navigate to the <strong>bin</strong> folder at the gem path you found earlier.</li>
-      <li>Select sass.bin</li>
-      <li>Click on <strong>Compass</strong> in the preferences menu.</li>
-      <li>Click on <strong>"Use the Compass executable at this path:"</strong></li>
-      <li>Navigate to the <strong>bin</strong> folder at the gem path you found earlier.</li>
-      <li>Select compass.bin</li>
-      <li>Compile to your hearts content.</li>
+      <li>Make sure you have the Foundation gem installed.</li>
+      <li>Create a new directory where you're project will live.</li>
+      <li>Open Terminal and move into that new directory.</li>
+      <li>Run <kbd>compass create -r zurb-foundation --using foundation</kbd></li>
+      <li>Open up CodeKit</li>
+      <li>File > Add Project</li>
+      <li>Choose the new folder that now contains the Foundation files.</li>
+      <li>Start making changes to the SCSS files and Codekit will compile the changes.</li>
     </ol>
 
-    <p><strong>Note:</strong> CodeKit does not support adding Foundation as a "framework" through the GUI. You'll need to use the steps above to accomplish this.</p>
-
-    <h5>LiveReload</h5>
-    <p>While LiveReload works great within CodeKit, it doesn't work well on its own because you can't update it to use your system Sass and Compass directories. Do not use this application to compile Foundation.</p>
+   <!--  <h5>LiveReload</h5>
+    <p>While LiveReload works great within CodeKit, it doesn't work well on its own because you can't update it to use your system Sass and Compass directories. Do not use this application to compile Foundation.</p> -->
 
     <h5>Compass.app</h5>
     <p>Foundation is included with Compass.app.</p>
-
+<!--
     <h5>Scout</h5>
-    <p>This app doesn't have support for updating the version of Sass and Compass that you use so we're not supporting it at this point.</p>
+    <p>This app doesn't have support for updating the version of Sass and Compass that you use so we're not supporting it at this point.</p> -->
 
-    <hr> -->
+    <hr>
 
   </div>
 

data/js/foundation/foundation.forms.js

@@ -4,7 +4,7 @@
   Foundation.libs.forms = {
     name: 'forms',
 
-    version: '4.2.0',
+    version: '4.2.1',
 
     cache: {},
 
@@ -445,7 +445,8 @@
           var _self = this;
 
           // Set all hidden parent elements, including this element.
-          _self.hidden = $child.parents().addBack().filter(":hidden");
+          _self.hidden = $child.parents();
+          _self.hidden = _self.hidden.add($child).filter(":hidden");
 
           // Loop through all hidden elements.
           _self.hidden.each(function () {

data/js/foundation/foundation.interchange.js

@@ -6,7 +6,7 @@
   Foundation.libs.interchange = {
     name : 'interchange',
 
-    version : '4.2.0',
+    version : '4.2.1',
 
     cache : {},
 
@@ -19,7 +19,13 @@
         medium : 'only screen and (min-width: 1280px)',
         large : 'only screen and (min-width: 1440px)',
         landscape : 'only screen and (orientation: landscape)',
-        portrait : 'only screen and (orientation: portrait)'
+        portrait : 'only screen and (orientation: portrait)',
+        retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),'
+          + 'only screen and (min--moz-device-pixel-ratio: 2),'
+          + 'only screen and (-o-min-device-pixel-ratio: 2/1),'
+          + 'only screen and (min-device-pixel-ratio: 2),'
+          + 'only screen and (min-resolution: 192dpi),'
+          + 'only screen and (min-resolution: 2dppx)'
       },
 
       directives : {

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.2.0"
+  VERSION = "4.2.1"
 end

data/scss/foundation/_variables.scss

@@ -22,7 +22,7 @@ $em-base: 16px !default;
 }
 
 // Change whether or not you include browser prefixes
-$experimental: true !default;
+// $experimental: true;
 
 // Various global styles
 

data/scss/foundation/components/_global.scss

@@ -2,6 +2,8 @@
 // Global Foundation Mixins
 //
 
+$experimental: true !default;
+
 // We use this to control border radius.
 @mixin radius($radius:$global-radius) {
   @if $radius {

data/scss/foundation/components/_top-bar.scss

@@ -218,7 +218,7 @@ $topbar-sticky-class:                  ".sticky" !default;
       width: 100%;
       height: auto;
       display: block;
-      background: $topbar-bg;
+      background: $topbar-dropdown-bg;
       font-size: $em-base;
       margin: 0;
     }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zurb-foundation
 version: !ruby/object:Gem::Version
-  version: 4.2.0
+  version: 4.2.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-30 00:00:00.000000000 Z
+date: 2013-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -236,7 +236,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3901516274681788208
+      hash: -4467022467300233239
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -245,7 +245,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3901516274681788208
+      hash: -4467022467300233239
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23