Sawtaytoes Sawtaytoes - 6 months ago 12
CSS Question

Foundation 5 no longer using xlarge and xxlarge grid sizes

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

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)