I just added some new breakpoints to Foundation 6’s new XY grid, and found it surprisingly simple.
What I wanted was a grid of items whose columns were all dictated in one place, so didn’t have the faff of updating the classes of individual items (although normally these are output dynamically by the CMS, so it’s not an issue. But when developing and testing, it can take some time), so I used the XY grid’s “Block Grid” method (https://foundation.zurb.com/sites/docs/xy-grid.html#block-grids).
So you add the amount of columns as classes in the parent div like this:
<div class="grid-x small-up-2 medium-up-3 large-up-4">
Not that this is different to normal in Foundation, where you specify now many columns it should take up.
E.g. for a 2-column grid on desktop you’d use a class of “large-6” for example, as Foundation has a 12 column grid by default.
More columns on larger screens
So this has a limit, and Foundation only has 3 breakpoints by default, specified in the $breakpoint-classes variable in _settings.scss:
$breakpoint-classes: (small medium large);
What you can do is add 2 extra for wider screens. So for the project I’m working on, this now looks like:
$breakpoint-classes: (small medium large xlarge xxlarge);
The $breakpoints class already contains sizes for these classes, but for some reason they aren’t included as classes you can use by default. Not sure why, but I assume because it’s not often that you need to cater for such large screens, as the content will be stretched very wide and look odd. That’s why Foundation has a max-width on columns.
…and… that’s it. I was expecting to have to declare my own classes for “xlarge-5”, “xlarge-6” etc but they’re all now created automatically from the SASS. My HTML now looks like this:
<div class="grid-x small-up-2 medium-up-3 large-up-4 xlarge-up-5 xxlarge-up-6"> <div class="cell”>…</div> <div class="cell”>…</div> <div class="cell”>…</div> <div class="cell”>…</div> <div class="cell”>…</div> <div class="cell”>…</div> </div>
The maximum number of columns you can have in a block grid is 8. But if you need to change that, look for $block-grid-max in _settings.scss