Foundation 5 no longer using xlarge and xxlarge grid sizes

Question

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 1

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)

Answer 2

This has been changed in Foundation 6. In _settings.scss you now find the $breakpoint-classes list and add the extra classes you want. e.g.

$breakpoint-classes: (small medium large xlarge);