CSS
Menu

Breakpoints

Table of Contents

Breakpoint variables

The above values are defined as variables, and then put into a Sass map that generates the media query mixin.

// breakpoints
$width-xs: 0;
$width-sm: 544px;
$width-md: 768px;
$width-lg: 1012px;
$width-xl: 1280px;

$breakpoints: (
  // Small screen / phone
  sm: $width-sm,
  // Medium screen / tablet
  md: $width-md,
  // Large screen / desktop (980 + (12 * 2)) <= container + gutters
  lg: $width-lg,
  // Extra large screen / wide desktop
  xl: $width-xl
) !default;

Media query mixins

Use media query mixins when you want to change CSS properties at a particular breakpoint. The media query mixin works by passing in a breakpoint value, such as breakpoint(md).

Media queries are scoped from each breakpoint and upwards. In the example below, the font size is 28px until the viewport size meets the lg breakpoint, from there upwards—including through the xl breakpoint—the font size will be 32px.

.styles {
  font-size: 28px;
  @include breakpoint(md) { font-size: 32px; }
}

Responsive variants

The $responsive-variants variable is a mapping of breakpoints to classname variants, and should be used like so:

@each $breakpoint, $variant in $responsive-variants {
  @include breakpoint($breakpoint) {
    // Note: the first iteration gets `$variant == ""`
    .overflow#{$variant}-auto { overflow: auto; }
  }
}

The resulting CSS would be:

.overflow-auto { overflow: auto; }
@media (min-width: 544px) { .overflow-sm-auto { overflow: auto; } }
@media (min-width: 768px) { .overflow-md-auto { overflow: auto; } }
@media (min-width: 1012px) { .overflow-lg-auto { overflow: auto; } }
@media (min-width: 1280px) { .overflow-xl-auto { overflow: auto; } }

Caution!

  1. Don’t precede the #{$variation} interpolation with a hyphen because the first value of $variant will be an empty string.
  2. For consistency, please put the @include breakpoint($breakpoint) call directly inside the $responsive-variants loop. This will help keep file sizes small by “batching” selectors in shared @media queries.
Edit this page on GitHub