zurb-foundation 4.0.7 → 4.0.8

data/Gemfile.lock

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

data/README.md

@@ -45,6 +45,7 @@ Joomla
 Drupal
 
 * [Drupal Theme](https://github.com/drewkennelly/foundation7) by Drew Kennelly
+* [Zoundation Theme](http://drupal.org/project/zoundation) by [Andrea Burton](https://twitter.com/andreaburton) & [Jeff Graham](https://twitter.com/jgraham909), FunnyMonkey
 
 PyroCMS
 

data/docs/CHANGELOG.md

@@ -1,3 +1,15 @@
+### 4.0.8- March 15, 2013
+* Added paragraph `text-rendering` variable: `$paragraph-text-rendering`.
+* Changed blockgrid to use clearfix instead of overflow.
+* Fixed nested row margin inside forms.
+* Fixed data_options function that caused booleans to be interpreted as numbers.
+* Tabs no longer automatically convert to accordion on desktop. 
+* Sections with accordion class always remain accordions and sections with tab class always remain tabs. 
+* Vertical and horizontal navigation elements still become accordions on mobile
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.0.7...v4.0.8).
+
+
 ### 4.0.7- March 14, 2013
 * Fixed problem with buggy pull request that made radius buttons look like ovals, sorry.
 

data/docs/components/block-grid.html.erb

@@ -10,10 +10,10 @@
         <h4 class="subheader">Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.</h4>
 
         <ul class="small-block-grid-2 large-block-grid-4">
-          <li><img src="../img/demos/demo1.jpg"></li>
-          <li><img src="../img/demos/demo2.jpg"></li>
-          <li><img src="../img/demos/demo3.jpg"></li>
-          <li><img src="../img/demos/demo4.jpg"></li>
+          <li><img class="th" src="../img/demos/demo1.jpg"></li>
+          <li><img class="th" src="../img/demos/demo2.jpg"></li>
+          <li><img class="th" src="../img/demos/demo3.jpg"></li>
+          <li><img class="th" src="../img/demos/demo4.jpg"></li>
         </ul>
 
         <hr>

data/docs/components/grid.html.erb

@@ -330,8 +330,8 @@ $float: false
 
 <%= code_example '
 #masthead { @include grid-row; @include panel;
-  & > hgroup { @include grid-column(4, $float:left); }
-  & > section { @include grid-column(8, $float:left); }
+  & > hgroup { @include grid-column(4); }
+  & > section { @include grid-column(8); }
 }', :css %>
 
         <header id="masthead">

data/docs/components/labels.html.erb

@@ -85,7 +85,7 @@ $label-padding:     emCalc(3px) emCalc(6px) emCalc(4px);
 $label-radius:      $global-radius;
 
 /* We use these to style the label text */
-$label-font-size:   emCalc(14px);
+$label-font-sizing: emCalc(14px);
 $label-font-weight: bold;', :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>

data/docs/components/orbit.html.erb

@@ -218,7 +218,7 @@ $stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function
         <hr>
 
         <h3>Using the JavaScript</h3>
-        <p>You'll need to include <code>foundation.orbit.js</code> if you want to use Orbit. You'll also need to make sure to include <code>zepto.js</code> and/or <code>jquery.js</code> along with <code>foundation.js</code> above the Orbit plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+        <p>You'll need to include <code>foundation.orbit.js</code> if you want to use Orbit. You'll also need to make sure to include <code>zepto.js</code> and/or <code>jquery.js</code> along with <code>foundation.js</code> above the Orbit plugin. Above your closing <code>&lt;/body&gt;</code> tag include the Foundation library and either Zepto or jQuery.</p>
 
         <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
 

data/docs/components/pagination.html.erb

@@ -34,7 +34,7 @@
         <ul class="disc">
           <li>To create the arrows, make sure you have <code>&lt;li class="arrow"&gt;</code> as your first and last list items.</li>
           <li>To mark the current page, use <code>&lt;li class="current"&gt;</code></li>
-          <li>Add a class of <code>.inactive</code> to a list item to make it not clickable, like for the ellipsis in the middle.</li>
+          <li>Add a class of <code>.unavailable</code> to a list item to make it not clickable, like for the ellipsis in the middle.</li>
           <li>The page numbers and symbols are always inside of an anchor that you'll link to the page.</li>
         </ul>
 

data/docs/components/section.html.erb

@@ -11,7 +11,7 @@
 
         <div class="row">
           <div class="large-3 columns">
-            <div class="section-container vertical-nav" data-section data-options="deep_linking: false">
+            <div class="section-container vertical-nav" data-section>
               <section class="section">
                 <p class="title"><a href="#">Section 1</a></p>
                 <div class="content">
@@ -39,7 +39,7 @@
             </div>
           </div>
           <div class="large-9 columns">
-            <div class="section-container horizontal-nav" data-section data-options="deep_linking: false">
+            <div class="section-container horizontal-nav" data-section>
               <section class="section">
                 <p class="title"><a href="#">Section 1</a></p>
                 <div class="content">
@@ -65,7 +65,7 @@
                 </div>
               </section>
             </div>
-            <div class="section-container tabs" data-section data-options="deep_linking: true">
+            <div class="section-container tabs" data-section data-options="deep_linking: true;">
               <section class="section">
                 <p class="title"><a href="#panel1">Section 1</a></p>
                 <div class="content" data-slug="panel1">
@@ -167,7 +167,7 @@
     </div>
   </section>
 </div>', :html %>
-        
+
         <h6>Tabs/Accordion</h6>
         <p>Adding a <code>tabs</code> class to the section container will enable tabs on large screens and show an accordion on small screens.</p>
 <%= code_example '

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

@@ -22,12 +22,12 @@
           <section class="top-bar-section">
             <ul class="left">
               <li class="divider"></li>
-              <li class="has-dropdown"><a href="<%= features_path %>">Item 1 Item 1 Item 1</a>
+              <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a>
 
                 <ul class="dropdown">
-                  <!-- <li><label>Level One</label></li> -->
+                  <li><label>Level One</label></li>
                   <li><a href="#">Sub-item 1</a></li>
-                  <!-- <li><a href="#">Sub-item 2</a></li>
+                  <li><a href="#">Sub-item 2</a></li>
                   <li class="divider"></li>
                   <li><a href="#">Sub-item 3</a></li>
                   <li class="has-dropdown"><a href="#">Sub-item 4</a>
@@ -56,10 +56,10 @@
                       <li><a href="#">Sub-item 4</a>
                     </ul>
                   </li>
-                  <li><a href="#">Sub-item 5</a></li> -->
+                  <li><a href="#">Sub-item 5</a></li>
                 </ul>
               </li>
-              <!-- <li class="divider"></li> -->
+              <li class="divider"></li>
             </ul>
             <!-- Right Nav Section -->
             <ul class="right">

data/docs/components/type.html.erb

@@ -298,6 +298,7 @@ $paragraph-margin-bottom:              emCalc(20px);
 $paragraph-aside-font-size:            emCalc(14px);
 $paragraph-aside-line-height:          1.35;
 $paragraph-aside-font-style:           italic;
+$paragraph-text-rendering:             optimizeLegibility;
 
 /* We use these to style <code> tags */
 $code-color:                           darken($alert-color, 15%);

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>fx_methods</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>event</i>, <i>fx_methods</i>, <i>assets</i>, <i>data</i>, <i>selector</i>, and <i>stack</i> modules.</p>
 
         <hr>
 

data/docs/sass.html.erb

@@ -59,9 +59,6 @@
     <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";
@@ -206,6 +203,8 @@ bundle exec compass create . -r zurb-foundation --using foundation
 
 <%= code_example '
 // Foundation Global Function, Variables and Mixins
+@import "foundation/components/global";
+
 //
 // Variables
 //

data/js/foundation/foundation.js

@@ -98,7 +98,7 @@ if (typeof jQuery === "undefined" &&
   window.Foundation = {
     name : 'Foundation',
 
-    version : '4.0.0',
+    version : '4.0.8',
 
     // global Foundation cache object
     cache : {},
@@ -108,7 +108,7 @@ if (typeof jQuery === "undefined" &&
           args = [scope, method, options, response],
           responses = [],
           nc = nc || false;
-
+          
       // disable library error catching,
       // used for development only
       if (nc) this.nc = nc;
@@ -189,16 +189,31 @@ if (typeof jQuery === "undefined" &&
       }
     },
 
+    random_str : function (length) {
+      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
+      
+      if (!length) {
+          length = Math.floor(Math.random() * chars.length);
+      }
+      
+      var str = '';
+      for (var i = 0; i < length; i++) {
+          str += chars[Math.floor(Math.random() * chars.length)];
+      }
+      return str;
+    },
+
     libs : {},
 
     // methods that can be inherited in libraries
     lib_methods : {
       set_data : function (node, data) {
         // this.name references the name of the library calling this method
-        var id = this.name + (+new Date());
+        var id = [this.name,+new Date(),Foundation.random_str(5)].join('-');
 
         Foundation.cache[id] = data;
         node.attr('data-' + this.name + '-id', id);
+        return data;
       },
 
       get_data : function (node) {
@@ -228,7 +243,7 @@ if (typeof jQuery === "undefined" &&
         };
       },
 
-      // parses data-options attribute on page nodes and turns
+      // parses data-options attribute on nodes and turns
       // them into an object
       data_options : function (el) {
         var opts = {}, ii, p,
@@ -236,7 +251,7 @@ if (typeof jQuery === "undefined" &&
             opts_len = opts_arr.length;
 
         function isNumber (o) {
-          return ! isNaN (o-0) && o !== null && o !== "" && o !== false;
+          return ! isNaN (o-0) && o !== null && o !== "" && o !== false && o !== true;
         }
 
         function trim(str) {
@@ -252,7 +267,7 @@ if (typeof jQuery === "undefined" &&
           if (/false/i.test(p[1])) p[1] = false;
           if (isNumber(p[1])) p[1] = parseInt(p[1], 10);
 
-          if (p.length === 2) {
+          if (p.length === 2 && p[0].length > 0) {
             opts[trim(p[0])] = trim(p[1]);
           }
         }

data/js/foundation/foundation.reveal.js

@@ -90,7 +90,7 @@
 
       var open_modal = $('.reveal-modal.open');
 
-      if (!modal.data('css-top')) {
+      if (typeof modal.data('css-top') === 'undefined') {
         modal.data('css-top', parseInt(modal.css('top'), 10))
           .data('offset', this.cache_offset(modal));
       }

data/js/foundation/foundation.section.js

@@ -6,7 +6,7 @@
   Foundation.libs.section = {
     name: 'section',
 
-    version : '4.0.5',
+    version : '4.0.8',
 
     settings : {
       deep_linking: false,
@@ -15,18 +15,16 @@
     },
 
     init : function (scope, method, options) {
+      var self = this;
+
       this.scope = scope || this.scope;
       Foundation.inherit(this, 'throttle data_options');
 
-      if (typeof method === 'object') {
-        $.extend(true, this.settings, method);
-      }
-
       if (typeof method != 'string') {
         this.set_active_from_hash();
-        if (!this.settings.init) this.events();
+        this.events();
 
-        return this.settings.init;
+        return true;
       } else {
         return this[method].call(this, options);
       }
@@ -34,31 +32,36 @@
 
     events : function () {
       var self = this;
-      $(this.scope).on('click.fndtn.section', '[data-section] .title', function (e) {
-        $.extend(true, self.settings, self.data_options($(this).closest('[data-section]')));
-        self.toggle_active.call(this, e, self);
-      });
 
-      $(window).on('resize.fndtn.section', self.throttle(function () {
-        self.resize.call(this);
-      }, 30))
-      .on('hashchange', function () {
-        if (!self.settings.toggled){
-          self.set_active_from_hash();
-          $(this).trigger('resize');
-        }
-      }).trigger('resize');
+      $(this.scope)
+        .on('click.fndtn.section', '[data-section] .title', function (e) {
+          var $this = $(this),
+              section = $this.closest('[data-section]');
 
-      $(document).on('click.fndtn.section', function (e) {
-        if ($(e.target).closest('.title').length < 1) {
-          $('[data-section].vertical-nav, [data-section].horizontal-nav')
-            .find('section, .section')
-            .removeClass('active')
-            .attr('style', '');
-        }
-      });
+          self.toggle_active.call(this, e, self);
+        });
+
+      $(window)
+        .on('resize.fndtn.section', self.throttle(function () {
+          self.resize.call(this);
+        }, 30))
+        .on('hashchange', function () {
+          if (!self.settings.toggled){
+            self.set_active_from_hash();
+            $(this).trigger('resize');
+          }
+        }).trigger('resize');
+
+      $(document)
+        .on('click.fndtn.section', function (e) {
+          if ($(e.target).closest('.title').length < 1) {
+            $('[data-section].vertical-nav, [data-section].horizontal-nav')
+              .find('section, .section')
+              .removeClass('active')
+              .attr('style', '');
+          }
+        });
 
-      this.settings.init = true;
     },
 
     toggle_active : function (e, self) {
@@ -66,10 +69,12 @@
           section = $this.closest('section, .section'),
           content = section.find('.content'),
           parent = section.closest('[data-section]'),
-          self = Foundation.libs.section;
+          self = Foundation.libs.section,
+          settings = $.extend({}, self.settings, self.data_options(parent));
+
       self.settings.toggled = true;
 
-      if (!self.settings.deep_linking && content.length > 0) {
+      if (!settings.deep_linking && content.length > 0) {
         e.preventDefault();
       }
 
@@ -86,7 +91,7 @@
         var prev_active_section = null,
             title_height = self.outerHeight(section.find('.title'));
 
-        if (self.small(parent) || self.settings.one_up) {
+        if (self.small(parent) || settings.one_up) {
           prev_active_section = $this.closest('[data-section]').find('section.active, .section.active');
 
           if (self.small(parent)) {
@@ -103,14 +108,17 @@
         }
 
         section.addClass('active');
+
         if (prev_active_section !== null) {
           prev_active_section.removeClass('active').attr('style', '');
         }
       }
+
       setTimeout(function () {
         self.settings.toggled = false;
       }, 300);
-      self.settings.callback();
+
+      settings.callback();
     },
 
     resize : function () {
@@ -119,7 +127,9 @@
 
       sections.each(function() {
         var $this = $(this),
-            active_section = $this.find('section.active, .section.active');
+            active_section = $this.find('section.active, .section.active'),
+            settings = $.extend({}, self.settings, self.data_options($this));
+
         if (active_section.length > 1) {
           active_section
             .not(':first')
@@ -129,6 +139,7 @@
           && !self.is_vertical($this)
           && !self.is_horizontal($this)
           && !self.is_accordion($this)) {
+
           var first = $this.find('section, .section').first();
           first.addClass('active');
 
@@ -144,6 +155,7 @@
         } else {
           active_section.css('padding-top', self.outerHeight(active_section.find('.title')));
         }
+
         self.position_titles($this);
 
         if (self.is_horizontal($this) && !self.small($this)) {
@@ -172,10 +184,10 @@
           self = this;
 
       sections.each(function () {
-        var section = $(this);
-        $.extend(true, self.settings, self.data_options(section));
+        var section = $(this),
+            settings = $.extend({}, self.settings, self.data_options(section));
 
-        if (hash.length > 0 && self.settings.deep_linking) {
+        if (hash.length > 0 && settings.deep_linking) {
           section
             .find('section, .section')
             .attr('style', '')
@@ -231,6 +243,10 @@
     },
 
     small : function (el) {
+      var settings = $.extend({}, this.settings, this.data_options(el));
+      if (el && el.hasClass('tabs')) {
+        return false;
+      }
       if (el && this.is_accordion(el)) {
         return true;
       }
@@ -246,7 +262,7 @@
     off : function () {
       $(this.scope).off('.fndtn.section');
       $(window).off('.fndtn.section');
-      this.settings.init = false;
+      $(document).off('.fndtn.section')
     }
   };
-}(Foundation.zj, this, this.document));
+}(Foundation.zj, this, this.document));

data/js/foundation/foundation.topbar.js

@@ -87,7 +87,7 @@
             topbar.parent().removeClass('fixed');
             $('body').css('padding-top','0');
             window.scrollTo(0);
-          } else {
+          } else if (topbar.hasClass('fixed expanded')) {
             topbar.parent().addClass('fixed');
             $('body').css('padding-top',offst);
           }

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.0.7"
+  VERSION = "4.0.8"
 end

data/scss/foundation/components/_block-grid.scss

@@ -19,9 +19,9 @@ $block-grid-media-queries: true !default;
 
   @if $base-style {
     display: block;
-    overflow: hidden;
     padding: 0;
     margin: 0 (-$spacing);
+    @include clearfix;
 
     &>li {
       display: block;

data/scss/foundation/components/_buttons.scss

@@ -170,7 +170,7 @@ $button-disabled-opacity: 0.6 !default;
     &.large  { @include button-size($padding:$button-lrg); }
     &.small  { @include button-size($padding:$button-sml); }
     &.tiny   { @include button-size($padding:$button-tny); }
-    &.expand { @include button-size($full-width:true); }
+    &.expand { @include button-size(false,$full-width:true); }
 
     &.left-align  { text-align: left; text-indent: emCalc(12px); }
     &.right-align { text-align: right; padding-right: emCalc(12px); }

data/scss/foundation/components/_forms.scss

@@ -245,21 +245,20 @@ $input-error-message-font-color-alt: #333 !default;
 @if $include-html-form-classes {
 	/* Standard Forms */
   form { margin: 0 0 $form-spacing; }
-  
+
   /* Using forms within rows, we need to set some defaults */
   form .row { @include form-row-base; }
-  form .row .row { margin: 0; }
-  
+
   /* Label Styles */
   label { @include form-label;
     &.right { @include form-label(right,false); }
     &.inline { @include form-label(inline,false); }
   }
-  
+
   /* Attach elements to the beginning or end of an input */
   .prefix,
   .postfix { @include prefix-postfix-base; }
-  
+
   /* Adjust padding, alignment and radius if pre/post element is a button */
   .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
   .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
@@ -267,7 +266,7 @@ $input-error-message-font-color-alt: #333 !default;
   .postfix.button.radius { @include side-radius(right, $global-radius); }
   .prefix.button.round { @include side-radius(left, 1000px); }
   .postfix.button.round { @include side-radius(right, 1000px); }
-  
+
   /* Separate prefix and postfix styles when on span so buttons keep their own */
   span.prefix { @include prefix();
     &.radius { @include side-radius(left, $global-radius); }
@@ -275,7 +274,7 @@ $input-error-message-font-color-alt: #333 !default;
   span.postfix { @include postfix();
     &.radius { @include side-radius(right, $global-radius); }
   }
-  
+
   /* Input groups will automatically style first and last elements of the group */
   .input-group {
     &.radius {
@@ -295,7 +294,7 @@ $input-error-message-font-color-alt: #333 !default;
       }
     }
   }
-  
+
   /* We use this to get basic styling on all basic form elements */
   input[type="text"],
   input[type="password"],
@@ -314,12 +313,12 @@ $input-error-message-font-color-alt: #333 !default;
     @include form-element;
     @include single-transition(all, 0.15s, linear);
   }
-  
+
   /* We add basic fieldset styling */
   fieldset {
     @include fieldset;
   }
-  
+
   /* Error Handling */
   .error input,
   input.error,
@@ -327,10 +326,10 @@ $input-error-message-font-color-alt: #333 !default;
   textarea.error {
     @include form-error-color;
   }
-  
+
   .error label,
   label.error { @include form-label-error-color; }
-  
+
   .error small,
   small.error {
     @include form-error-message;

data/scss/foundation/components/_grid.scss

@@ -53,7 +53,7 @@ $total-columns: 12 !default;
 
 
 // For creating columns - @include these inside a media query to control small vs. large grid layouts
-@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:false) {
+@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:left) {
 
   position: relative;
 
@@ -88,10 +88,11 @@ $total-columns: 12 !default;
   @if $center {
     margin-left: auto;
     margin-right: auto;
+    float: none !important;
   }
 
   @if $float {
-    @if $float == left { float: $default-float; }
+    @if $float == left or true { float: $default-float; }
     @else if $float == right { float: $default-opposite; }
     @else { float: none; }
   }
@@ -121,37 +122,37 @@ $total-columns: 12 !default;
   @media only screen {
 
     .row .column,
-    .row .columns { @include grid-column($columns:false, $float:left); }
+    .row .columns { @include grid-column($columns:false); }
 
     @for $i from 1 through $total-columns {
-      .row .small#{-$i} { @include grid-column($columns:$i,$collapse:null); }
+      .row .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
     }
 
     @for $i from 1 through $total-columns - 2 {
-      .row .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null); }
+      .row .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
     }
 
     [class*="column"] + [class*="column"]:last-child { float: $default-opposite; }
     [class*="column"] + [class*="column"].end { float: $default-float; }
 
     .column.small-centered,
-    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:none); }
+    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
   }
 
   /* Styles for screens that are atleast 768px; */
   @media #{$small} {
 
     @for $i from 1 through $total-columns {
-      .row .large#{-$i} { @include grid-column($columns:$i,$collapse:null); }
+      .row .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
     }
 
     @for $i from 1 through $total-columns - 2 {
-      .row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null); }
+      .row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
     }
 
     @for $i from 2 through $total-columns - 2 {
-      .push#{-$i} { @include grid-column($push:$i, $collapse:null); }
-      .pull#{-$i} { @include grid-column($pull:$i, $collapse:null); }
+      .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
+      .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
     }
 
     @for $i from 2 through $total-columns - 2 {
@@ -160,7 +161,7 @@ $total-columns: 12 !default;
     }
 
     .column.large-centered,
-    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:none); }
+    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
 
   }
 

data/scss/foundation/components/_labels.scss

@@ -7,7 +7,7 @@ $label-padding:     emCalc(3px) emCalc(10px) emCalc(4px) !default;
 $label-radius:      $global-radius !default;
 
 // We use these to style the label text
-$label-font-size:   emCalc(14px) !default;
+$label-font-sizing:   emCalc(14px) !default;
 $label-font-weight: bold !default;
 
 //
@@ -26,7 +26,7 @@ $label-font-weight: bold !default;
 }
 
 // We use this mixin to add label size styles.
-@mixin label-size($padding:$label-padding, $text-size:$label-font-size) {
+@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
   @if $padding { padding: $padding; }
   @if $text-size { font-size: $text-size; }
 }
@@ -54,7 +54,8 @@ $label-font-weight: bold !default;
 }
 
 // We use this to add close buttons to alerts
-@mixin label($padding:$label-padding, $text-size:$label-font-size, $bg:$primary-color, $radius:false) {
+@mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
+
   @include label-base;
   @include label-size($padding, $text-size);
   @include label-style($bg, $radius);

data/scss/foundation/components/_section.scss

@@ -210,6 +210,13 @@ $section-bottom-margin:          emCalc(20px) !default;
     .section { @include section; }
   }
 
+  .section-container.tabs {
+    @include section-container(false, tabs);
+
+    section,
+    .section { @include section(tabs); }
+  }
+
   @media #{$small} {
 
     .section-container.accordion .section {
@@ -229,13 +236,6 @@ $section-bottom-margin:          emCalc(20px) !default;
       section,
       .section { @include section(horizontal-nav); }
     }
-
-    .section-container.tabs {
-      @include section-container(false, tabs);
-
-      section,
-      .section { @include section(tabs); }
-    }
   }
 
 }

data/scss/foundation/components/_type.scss

@@ -40,6 +40,7 @@ $paragraph-margin-bottom:              emCalc(20px) !default;
 $paragraph-aside-font-size:            emCalc(14px) !default;
 $paragraph-aside-line-height:          1.35 !default;
 $paragraph-aside-font-style:           italic !default;
+$paragraph-text-rendering:             optimizeLegibility !default;
 
 // We use these to style <code> tags
 $code-color:                           darken($alert-color, 15%) !default;
@@ -160,6 +161,7 @@ p {
   font-size: $paragraph-font-size;
   line-height: $paragraph-line-height;
   margin-bottom: $paragraph-margin-bottom;
+  text-rendering: $paragraph-text-rendering;
 
   &.lead { @extend %lead; }
 

data/templates/project/scss/_settings.scss

@@ -46,6 +46,21 @@
 // $include-html-classes: true;
 // $include-print-styles: true;
 
+// Modular html classes
+// $include-html-grid-classes: $include-html-classes;
+// $include-html-visibility-classes: $include-html-classes;
+// $include-html-button-classes: $include-html-classes;
+// $include-html-form-classes: $include-html-classes;
+// $include-html-media-classes: $include-html-classes;
+// $include-html-section-classes: $include-html-classes;
+// $include-html-reveal-classes: $include-html-classes;
+// $include-html-alert-classes: $include-html-classes;
+// $include-html-nav-classes: $include-html-classes;
+// $include-html-label-classes: $include-html-classes;
+// $include-html-panel-classes: $include-html-classes;
+// $include-html-pricing-classes: $include-html-classes;
+// $include-html-progress-classes: $include-html-classes;
+
 //
 // Grid Variables
 //
@@ -584,7 +599,7 @@
 // $label-radius: $global-radius;
 
 // We use these to style the label text
-// $label-font-size: emCalc(14px);
+// $label-font-sizing: emCalc(14px);
 // $label-font-weight: bold;
 
 //

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zurb-foundation
 version: !ruby/object:Gem::Version
-  version: 4.0.7
+  version: 4.0.8
   prerelease: 
 platform: ruby
 authors:
@@ -229,7 +229,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3158140803061983310
+      hash: -2268811908877619416
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -238,7 +238,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -3158140803061983310
+      hash: -2268811908877619416
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23