Foundation 5 no longer using xlarge and xxlarge grid sizes

Kevin Ghadyani picture Kevin Ghadyani · Feb 7, 2014 · Viewed 8.6k times · Source

Problem

In Foundation 5.0.2 and up, it is not using the xlarge and xxlarge grid sizes. They worked in prior versions 5.0.0 and 5.0.1.

So when going into the css file from foundation, it will only show small, medium, and large grid sizes.

Apparently no version of Foundation 5 has xlarge and xxlarge block-grids either.

Question

Is there a way to get these to work again?

Tests

I went to their website and downloaded the latest 5.1.1, and it had the same issue in foundation.css.

I'm building it myself with Sass and also tried adding in the override variables in there manually:

// Here we define the lower and upper bounds for each media size
$small-range: 0em, 40em // 0, 640px
$medium-range: 40.063em, 64em // 641px, 1024px
$large-range: 64.063em, 90em // 1025px, 1440px
$xlarge-range: 90.063em, 120em // 1441px, 1920px
$xxlarge-range: 120.063em // 1921px

$screen: "only screen"

$landscape: "#{$screen} and (orientation: landscape)"
$portrait: "#{$screen} and (orientation: portrait)"

$small-up: $screen
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"

Answer

jonsuh picture jonsuh · Feb 7, 2014

In your settings file uncomment and set the following as true (It's line 32 for me):

$include-xl-html-grid-classes: true;

Then recompile and the xlarge and xxlarge classes should be present. (Make sure to get rid of your overrides, just in case there's a conflict)