zurb-foundation 4.0.4 → 4.0.5

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

@@ -33,19 +33,19 @@
 
 <%= code_example '
 <!-- Size Classes -->
-<a href="#" class="button split">Default Button</a>
-<a href="#" class="tiny button split">Tiny Button</a>
-<a href="#" class="small button split">Small Button</a>
-<a href="#" class="large button split">Large Button</a>
+<a href="#" class="button split">Default Button <span></span></a>
+<a href="#" class="tiny button split">Tiny Button <span></span></a>
+<a href="#" class="small button split">Small Button <span></span></a>
+<a href="#" class="large button split">Large Button <span></span></a>
 
 <!-- Color Classes -->
-<a href="#" class="button split secondary">Secondary Button</a>
-<a href="#" class="button split success">Success Button</a>
-<a href="#" class="button split alert">Alert Button</a>
+<a href="#" class="button split secondary">Secondary Button <span></span></a>
+<a href="#" class="button split success">Success Button <span></span></a>
+<a href="#" class="button split alert">Alert Button <span></span></a>
 
 <!-- Radius Classes -->
-<a href="#" class="button split radius">Radius Button</a>
-<a href="#" class="button split round">Round Button</a>
+<a href="#" class="button split radius">Radius Button <span></span></a>
+<a href="#" class="button split round">Round Button <span></span></a>
 ', :html %>
 
         <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>split buttons from a custom package</strong>. These should be linked up following our default <a href="#getting-started">HTML page structure</a>.</p>
@@ -62,7 +62,7 @@
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>
 
 <%= code_example '
-<a href="#" class="your-class-name">Split Button Text</a>
+<a href="#" class="your-class-name">Split Button Text <span></span></a>
 ', :html %>
 
         <h5>Quick Mixin</h5>
@@ -154,7 +154,7 @@ $split-button-pip-left-lrg:    emCalc(-9px);
         <p>To create a dropdown, you'll need to attach a data-attribute to whatever element you want the dropdown attached to (in this case a button). From there, you'll create a list that holds the links or content and add another data-attribute that associates with the element it belongs to. Here's an example of that markup:</p>
 
 <%= code_example '
-<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>
+<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button <span data-dropdown="drop1"></span></a><br>
 
 <ul id="drop1" class="f-dropdown">
   <li><a href="#">This is a link</a></li>

data/docs/components/tooltips.html.erb

@@ -64,7 +64,7 @@
       + Foundation.libs.tooltips.settings.tooltipClass.substring(1)
       + '\">' + content + '<span class=\"nub\"></span></span>';
   }
-}", :json %>
+}", :js %>
 
       </div>
     </div>

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

@@ -63,7 +63,7 @@
             </ul>
             <!-- Right Nav Section -->
             <ul class="right">
-              <li class="divider"></li>
+              <li class="divider hide-for-small"></li>
               <li><a href="#">Item 2</a></li>
             </ul>
           </section>
@@ -273,8 +273,10 @@ $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout'
 {
   index : 0,
   stickyClass : 'sticky',
+  custom_back_text: true, // Set this to false and it will pull the top level link name as the back text
+  back_text: 'Back', // Define what you want your custom back text to be if custom_back_text: true
   init : false
-}", :json %>
+}", :js %>
       </div>
     </div>
   </div>

data/docs/components/type.html.erb

@@ -155,7 +155,13 @@
             <h6>Ordered Lists</h6>
             <ol>
               <li>List Item 1</li>
-              <li>List Item 2</li>
+              <li>List Item 2
+                <ol>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ol>
+              </li>
               <li>List Item 3</li>
             </ol>
           </div>

data/docs/components/visibility.html.erb

@@ -18,23 +18,25 @@
         <p class="panel">
           <strong class="show-for-small">You are on a small screen.</strong>
           <strong class="show-for-medium">You are on a medium screen.</strong>
-          <strong class="show-for-medium-up">You are on a medium or larger screen.</strong>
-          <strong class="show-for-medium-down">You are on a medium or smaller screen.</strong>
+          <strong class="show-for-medium-up">You are on a medium, large or xlarge screen.</strong>
+          <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
           <strong class="show-for-large">You are on a large screen.</strong>
-          <strong class="show-for-large-up">You are on a large or bigger screen.</strong>
-          <strong class="show-for-large-down">You are on a large or smaller screen.</strong>
+          <strong class="show-for-large-up">You are on a large or xlarge screen.</strong>
+          <strong class="show-for-large-down">You are on a large, medium or small screen.</strong>
+          <strong class="show-for-xlarge">You are on a xlarge screen.</strong>
         </p>
 
         <h5>Screen Size Visibility Control (Hide)</h5>
         <p>The following text should describe the screen size you aren't using:</p>
         <p class="panel">
-          <strong class="hide-for-small">You are not on a small screen.</strong>
-          <strong class="hide-for-medium">You are not on a medium screen.</strong>
-          <strong class="hide-for-medium-up">You are not on a medium or larger screen.</strong>
-          <strong class="hide-for-medium-down">You are not on a medium or smaller screen.</strong>
-          <strong class="hide-for-large">You are not on a large screen.</strong>
-          <strong class="hide-for-large-up">You are not on a large or bigger screen.</strong>
-          <strong class="hide-for-large-down">You are not on a large or smaller screen.</strong>
+          <strong class="hide-for-small">You are <em>not</em> on a small screen.</strong>
+          <strong class="hide-for-medium">You are <em>not</em> on a medium screen.</strong>
+          <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large or xlarge screen.</strong>
+          <strong class="hide-for-medium-down">You are <em>not</em> on a medium or small screen.</strong>
+          <strong class="hide-for-large">You are <em>not</em> on a large screen.</strong>
+          <strong class="hide-for-large-up">You are <em>not</em> on a large or xlarge screen.</strong>
+          <strong class="hide-for-large-down">You are <em>not</em> on a large, medium or small screen.</strong>
+          <strong class="hide-for-xlarge">You are <em>not</em> on a xlarge screen.</strong>
         </p>
 
         <h5>Orientation Detection</h5>
@@ -65,6 +67,7 @@
 .show-for-large-down  /* Visible from 1440px down */
 .show-for-large       /* Visible between 1280px and 1440px */
 .show-for-large-up    /* Visible from 1440px up */
+.show-for-xlarge      /* Visible above 1440px only */
 
 /* The hide classes */
 .hide-for-small       /* Hidden up to 768px */
@@ -74,6 +77,7 @@
 .hide-for-large-down  /* Hidden from 1440px down */
 .hide-for-large       /* Hidden between 1280px and 1440px */
 .hide-for-large-up    /* Hidden from 1440px up */
+.hide-for-xlarge      /* Hidden above 1440px only */
 
 /* The orientation classes */
 .show-for-landscape   /* Visible for landscape orientation */
@@ -86,6 +90,8 @@
 .hide-for-touch       /* Hidden for touch enabled devices */
 ', :css %>
 
+        <p><strong>Note:</strong> We've also included specific table hide/show visilibity classes that follow the same structure, just prepended with table, thead, th, tbody, tr or td. The display property will go from 'none' to whatever its default display should be.</p>
+
         <hr>
 
         <h3>Using SCSS?</h3>

data/docs/javascript.html.erb

@@ -53,7 +53,7 @@
 </script>
 ', :html %>
 
-        <p><strong>Note:</strong> We include tested versions of jQuery and Zepto in the Foundation repo to get you started quickly. If you want to build your own version of Zepto, Foundation employs the <i>event</i>, <i>fx</i>, <i>fx_methods</i>, <i>ajax</i>, <i>form</i>, <i>assets</i>, <i>data</i>, <i>selector</i>, and <i>stack</i> modules.</p>
+        <p><strong>Note:</strong> We include tested versions of jQuery and Zepto in the Foundation repo to get you started quickly. If you want to build your own version of Zepto, Foundation employs the <i>fx_methods</i>, <i>assets</i>, <i>data</i>, <i>selector</i>, and <i>stack</i> modules.</p>
 
         <hr>
 

data/docs/layout.html.erb

@@ -3,7 +3,7 @@
 <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Foundation Docs: <%= @page_title %></title>
     <link rel="stylesheet" href="<%= asset_path %>/normalize.css" />
     <link rel="stylesheet" href="<%= asset_path %>/docs.css" />
@@ -34,7 +34,7 @@
           <li><a href="<%= docs_path %>">Docs</a></li>
           <li class="divider"></li>
           <li class="has-form">
-            <a href="http://foundation.zurb.com/docs" class="button">Get Started</a>
+            <a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
           </li>
         </ul>
       </section>
@@ -64,7 +64,7 @@
 
       <div class="large-4 columns">
         <h6><strong>Need some help?</strong></h6>
-        <p>For answers or help visit the <a href="support.html">Support page</a>.</p>
+        <p>For answers or help visit the <a href="http://foundation.zurb.com/docs/support.html">Support page</a>.</p>
       </div>
     </footer>
 

data/docs/media-queries.html.erb

@@ -0,0 +1,96 @@
+<% @side_nav = "using" %>
+<% @page_title = "Media Queries" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">We keep media queries fairly simple in Foundation and let the percentage-based grid do the heavy lifting across various screen sizes.</h4>
+
+        <hr>
+
+        <h4>Working with Media Queries and CSS</h4>
+        <p>In CSS, media queries are easily written with a specific syntax. We only use one major breakpoint for the grid in Foundation to shift layouts for screens above 768px wide. The rest of the media queries are used for visibility classes. The following snippet shows you each of the media queries used in Foundation:</p>
+
+<%= code_example '
+/* We use this media query to add styles to any device that supports media queries */
+@media only screen { }
+
+/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
+@media only screen and (min-width: 768px) {}
+
+/* Used to alter styles for screens at least 1280px wide. */
+@media only screen and (min-width: 1280px) {}
+
+/* Used to alter styles for screens at least 1440px wide. */
+@media only screen and (min-width: 1440px) {}
+
+/* Apply styles to screens in landscape orientation */
+@media only screen and (orientation: landscape) {}
+
+/* Apply styles to screens in portrait orientation */
+@media only screen and (orientation: portrait) {}
+
+/* We also use Modernizr to add a .touch class to the body when applicable */
+/* You can prepend this class to anything and it will style only for touch devices */
+.touch .your-element {}
+', :css %>
+
+        <h4>Working with Media Queries and SCSS</h4>
+        <p>You can go ahead and use any of the CSS media queries in your SCSS files, but we've also made it easier with some handy variables you can use instead! Those variables are:</p>
+
+<%= code_example '
+/* Available Variables */
+$small-screen: emCalc(768px);
+$medium-screen: emCalc(1280px);
+$large-screen: emCalc(1440px);
+
+$screen: "only screen";
+$small: "only screen and (min-width:"#{$small-screen}")";
+$medium: "only screen and (min-width:"#{$medium-screen}")";
+$large: "only screen and (min-width:"#{$large-screen}")";
+$landscape: "only screen and (orientation: landscape)";
+$portrait: "only screen and (orientation: portrait)";
+
+/* We use this media query to add styles to any device that supports media queries */
+@media #{$screen} { }
+
+/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
+@media #{$small} { }
+
+/* Used to alter styles for screens at least 1280px wide. */
+@media #{$medium} { }
+
+/* Used to alter styles for screens at least 1440px wide. */
+@media #{$large} { }
+
+/* Apply styles to screens in landscape orientation */
+@media #{$landscape} { }
+
+/* Apply styles to screens in portrait orientation */
+@media #{$portrait} { }
+
+/* We also use Modernizr to add a .touch class to the body when applicable */
+/* You can prepend this class to anything and it will style only for touch devices */
+.touch .your-element {}
+', :css %>
+
+      </div>
+    </div>
+
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/docs/sass.html.erb

@@ -39,18 +39,89 @@
       <li>run <span class="keystroke">compass create &lt;project-name&gt; -r zurb-foundation --using foundation</span></li>
     </ol>
 
-    <br>
+    <hr>
+
+    <h3>Using Sass Standalone</h3>
+    <p>With Foundation 4, we've removed all dependencies from the framework. This means you can use Foundaiton with Sass alone and add Compass, Bourbon, or whatever on top of it. To help get going using only Sass, you'll just need to download the <a href="https://github.com/zurb/foundation">files from Github</a> (grab the scss/ and js/ directories) and put them into your project directory. From there you just need to <code>@import</code> the parts of Foundation you need.</p>
+
+    <p>To import all of Foundation:</p>
+<%= code_example '
+@import "/path/to/foundation";
+', :css %>
+
+    <p>If you want to override the built in variables, you can find them on each component page or grab that <a href="https://github.com/zurb/foundation/blob/master/templates/project/scss/_settings.scss">entire list from Github</a>. From there, you'll need to link your settings file above your Foundation import, like so:</p>
+
+<%= code_example '
+@import "/path/to/settings";
+@import "/path/to/foundation";
+', :css %>
+
+    <p>If you want to pick and choose which pieces of Foundation you want, the pieces you need are:</p>
+
+<%= code_example '
+@import "foundation/foundation-global";
+@import "foundation/components/global";
+
+/* Each individual part that can be added in */
+@import "foundation/components/grid";
+@import "foundation/components/visibility";
+@import "foundation/components/block-grid";
+@import "foundation/components/type";
+@import "foundation/components/buttons";
+@import "foundation/components/forms";
+@import "foundation/components/custom-forms";
+@import "foundation/components/button-groups";
+@import "foundation/components/dropdown-buttons";
+@import "foundation/components/split-buttons";
+@import "foundation/components/flex-video";
+@import "foundation/components/section";
+@import "foundation/components/top-bar";
+@import "foundation/components/orbit";
+@import "foundation/components/reveal";
+@import "foundation/components/joyride";
+@import "foundation/components/clearing";
+@import "foundation/components/alert-boxes";
+@import "foundation/components/breadcrumbs";
+@import "foundation/components/keystrokes";
+@import "foundation/components/labels";
+@import "foundation/components/inline-lists";
+@import "foundation/components/pagination";
+@import "foundation/components/panels";
+@import "foundation/components/pricing-tables";
+@import "foundation/components/progress-bars";
+@import "foundation/components/side-nav";
+@import "foundation/components/sub-nav";
+@import "foundation/components/switch";
+@import "foundation/components/magellan";
+@import "foundation/components/tables";
+@import "foundation/components/thumbs";
+@import "foundation/components/tooltips";
+@import "foundation/components/dropdown";
+', :css %>
+
+    <hr>
 
     <div class="row">
       <div class="large-12 columns">
-        <h5>Compiling Your Scss</h5>
+        <h3>Compiling Your Scss with Compass</h3>
         <p>To compile your Scss into CSS you run a simple command that will watch for saves and compile each time you save an Scss file. From the directory of your <kbd>config.rb</kbd> file, the command is:</p>
         <p class="btm-marg keystroke">compass watch</p>
+        <br>
         <p>If you are in a different directory you can use the same command, but navigate to where your <kbd>config.rb</kbd> file is. The command looks like:</p>
         <p class="btm-marg keystroke">compass watch path/to/project</p>
       </div>
     </div>
 
+    <hr>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <h3>Compiling Your Scss with Sass</h3>
+        <p class="btm-marg keystroke">sass --watch your/scss/directory:your/css/directory</p>
+        <br>
+        <p>You can watch individual files or the entire directory, we usually watch the entire directory when using Sass standalone.</p>
+      </div>
+    </div>
 
     <hr>
 
@@ -279,6 +350,15 @@ $include-print-styles: true;
   &:after { clear: both; }
 }
 
+// Media Queries
+$small-screen: emCalc(768px);
+$medium-screen: emCalc(1280px);
+$large-screen: emCalc(1440px);
+
+$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;
+
 ', :css %>
 
 

data/foundation.gemspec

@@ -16,5 +16,5 @@ Gem::Specification.new do |gem|
   gem.version       = Foundation::VERSION
 
   gem.add_dependency "sass", [">= 3.2.0"]
-  gem.add_dependency "rake"
+  gem.add_development_dependency "rake"
 end

data/js/foundation/foundation.forms.js

@@ -33,11 +33,11 @@
     },
 
     assemble : function () {
-      $('form.custom input[type="radio"]').not('[data-customforms="disabled"]')
+      $('form.custom input[type="radio"]', $(this.scope)).not('[data-customforms="disabled"]')
         .each(this.append_custom_markup);
-      $('form.custom input[type="checkbox"]').not('[data-customforms="disabled"]')
+      $('form.custom input[type="checkbox"]', $(this.scope)).not('[data-customforms="disabled"]')
         .each(this.append_custom_markup);
-      $('form.custom select').not('[data-customforms="disabled"]')
+      $('form.custom select', $(this.scope)).not('[data-customforms="disabled"]')
         .each(this.append_custom_select);
     },
 
@@ -45,16 +45,6 @@
       var self = this;
 
       $(this.scope)
-        .on('click.fndtn.forms', 'form.custom span.custom.checkbox', function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          self.toggle_checkbox($(this));
-        })
-        .on('click.fndtn.forms', 'form.custom span.custom.radio', function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-          self.toggle_radio($(this));
-        })
         .on('change.fndtn.forms', 'form.custom select:not([data-customforms="disabled"])', function (e) {
           self.refresh_custom_select($(this));
         })
@@ -66,6 +56,7 @@
             if ($associatedElement.attr('type') === 'checkbox') {
               e.preventDefault();
               $customCheckbox = $(this).find('span.custom.checkbox');
+
               //the checkbox might be outside after the label
               if ($customCheckbox.length == 0) {
                 $customCheckbox = $(this).next('span.custom.checkbox');
@@ -177,6 +168,7 @@
           $selector = $customSelect.find( ".selector" ),
           $options = $this.find( 'option' ),
           $selectedOption = $options.filter( ':selected' ),
+          copyClasses = $this.attr('class') ? $this.attr('class').split(' ') : [],
           maxWidth = 0,
           liHtml = '',
           $listItems,
@@ -190,7 +182,7 @@
                                $this.hasClass( 'large' )   ? 'large'   :
                                $this.hasClass( 'expand' )  ? 'expand'  : '';
 
-        $customSelect = $('<div class="' + ['custom', 'dropdown', customSelectSize ].join( ' ' ) + '"><a href="#" class="selector"></a><ul /></div>');
+        $customSelect = $('<div class="' + ['custom', 'dropdown', customSelectSize ].concat(copyClasses).filter(function(item, idx,arr){ if(item == '') return false; return arr.indexOf(item) == idx; }).join( ' ' ) + '"><a href="#" class="selector"></a><ul /></div>');
         $selector = $customSelect.find(".selector");
         $customList = $customSelect.find("ul");
         liHtml = $options.map(function() { return "<li>" + $( this ).html() + "</li>"; } ).get().join( '' );