Breakpoints

$breakpoints: (
  md: 696px,
  lg: 992px,
  xl: 1288px,
) !default;

Boilerplate comes with 3 breakpoints for 3 ranges.

The $breakpoints map is most commonly used through the at() and at-each() mixins.

Using a Breakpoint

The most common way is to use the at() (previously breakpoint()):

.example {
    @include at(md) {
        display: flex;
        flex-flow: row wrap;
    }
}

If you don’t want to use the $breakpoints map, you can also just pass in a distance:

@include at(1200px) {
  // ...
}

Breakpoint Shorthand

There’s also a shorthand, at-each(). at-each() takes pairs of arguments (technically a sass map), where the first one is the breakpoint you’d like to target and the second is a value you’d like to pass to your included code. If the breakpoint is omitted, then the block is included with the value outside of a media query:

.example {
    @include at-each(2.2rem, md 2.4rem, lg 2.6rem) using ($size) {
        font-size: $size;
    }
}

The above is a shorthand for

.example {
    font-size: 2.2rem;

    @include at(md) {
        font-size: 2.4rem;
    }

    @include at(lg) {
        font-size: 2.6rem;
    }
}

Similar to at(), you can also pass in lengths instead of keys from $breakpoints if you’d rather.