Foundation 4.3 and later come with two breakpoints — the pixel widths at which different grids take effect. We chose its default settings to accommodate most scenarios. But most doesn’t cover everyone. Sometimes a project requires different breakpoints. Here’s how you can tailor Foundation to suit your product design’s requirements.

1. Change the Sass variables

The easiest way to the width of Foundation’s three grids is to edit their settings in SCSS. In _settings.css, look for:

Media Query Ranges
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);

2. Search and replace in CSS

You’ll find breakpoints on many different lines. For example:

@media only screen and (min-width: 40.063em)

@media only screen and (min-width: 64.063em)

@media only screen and (min-width: 90.063em)

@media only screen and (min-width: 120.063em)

Each represents the point at which browsers apply different rules: Small, medium, large and extra large, respectively.

3. Which sizes to choose?

If you take a content-first approach, measure in ems or rems.

$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12;

As of this writing, Foundation 5 measures columns in rems. If you prefer pixel measurements, the rem-calc() function to tranlate pixels to rems for you. For example, with a body font size of 16px, rem-calc(600) would tell Foundation you mean 37.5 rems.

But if you design to fit devices rather than content, here are resources to help you pick which sizes to go with.

• Quickly find the screen specifications of the most popular devices and monitors currently on the market
• Learn more about of what your current setup is capable
• Mobile phone screen resolution market share
• StatCounter mobile screen resolutions

4. Customize the download

One more thing: Did you know Foundation doesn’t have to have 12 columns? You can customize the number of columns, gutter size and container width with the custom download form.

---