Breakpoints

We have defined commonly used breakpoints to make development for all screen sizes more efficient.

These breakpoint variables are defined in a map called $grid-breakpoints at /src/scss/utilities/_variables.scss.

Helpful Mixins

The following mixins are defined at /src/scss/utilities/_mixins/_breakpoints.scss.

breakpoint-min

breakpoint-min takes in a breakpoint variable we’ve defined and returns the value.

>> breakpoint-min(sm)
>> 600px

breakpoint-max

breakpoint-max takes in a breakpoint variable we’ve defined and returns the max value for the breakpoint.

>> breakpoint-max(sm)
>> 767px

Breakpoint Examples

// CSS Example Breakpoint Usage
@media (min-width: 768px) {
  display: inline-block;
}

// SCSS Example Breakpoint Usage
@media (min-width: breakpoint-min(md)) {
  display: inline-block;
}