A collection of mixins that work with CSS media queries. These mobile-first designed mixins make it easier write and maintain media query based rules.

Install

npm install seed-breakpoints --save

Dependencies

• seed-props

Basic mixins

The basic mixins of seed-breakpoints are typically used to customize the responsive behavior for CSS classes.

breakpoint

breakpoint($size)

See a list of the default breakpoint sizes.

Alternatively, you can pass a number value such as 580px, 48em, or 32rem.

example.scss

.element {
  @include breakpoint(md) {
    background: red;
  }
}

example.css

@media (min-width: 544px) {
  .element {
    background: red;
  }
}

breakpoint-between

breakpoint-between($min, $max)

See a list of the default breakpoint sizes.

Alternatively, you can pass a number value such as 580px, 48em, or 32rem.

example.scss

.element {
  @include breakpoint-between(md, lg) {
    background: red;
  }
}

example.css

@media (min-width: 544px) and (max-width: 768px) {
  .element {
    background: red;
  }
}

breakpoint-max

breakpoint-max($size)

See a list of the default breakpoint sizes.

Alternatively, you can pass a number value such as 580px, 48em, or 32rem.

example.scss

.element {
  @include breakpoint-max(md) {
    background: red;
  }
}

example.css

@media (max-width: 768px) {
  .element {
    background: red;
  }
}

breakpoint-min

breakpoint-min($size)

See a list of the default breakpoint sizes.

Alternatively, you can pass a number value such as 580px, 48em, or 32rem.

example.scss

.element {
  @include breakpoint-min(md) {
    background: red;
  }
}

example.css

@media (min-width: 768px) {
  .element {
    background: red;
  }
}

Advanced mixins

The advanced mixins of seed-breakpoints are typically used to automatically generate a series of classes that respond to the various breakpoint sizes.

breakpoint-all

breakpoint-all()

example.scss

.element {
  @include breakpoint-all() {
    background: red;
  }
}

example.css

.element {
  background: red;
}
@media (min-width: 544px) {
  .element\@sm {
    background: red;
  }
}
@media (min-width: 768px) {
  .element\@md {
    background: red;
  }
}
@media (min-width: 992px) {
  .element\@lg {
    background: red;
  }
}

This mixin loops through all the breakpoint sizes to generate the given @content of a selector. It also automatically includes the appropriate breakpoint modifiers.

Note: There is a \ added before the @ symbol to validate the CSS class name. When the generated classes are used in markup, you can simply write .element@md without the \.

breakpoint-prop-map

breakpoint-prop-map($map, $properties…)

example.scss

$states: (
  error: red,
  success: green
);

.alert {
  @include breakpoint-prop-map($states, (color)) {
    background: prop(color);
  }
}

example.css

.element-error {
  background: red;
}
.element-success {
  background: green;
}
@media (min-width: 544px) {
  .element-error\@sm {
    background: red;
  }
  .element-success\@sm {
    background: red;
  }
}
@media (min-width: 768px) {
  .element-error\@md {
    background: red;
  }
  .element-success\@md {
    background: green;
  }
}
@media (min-width: 992px) {
  .element-error\@lg {
    background: red;
  }
  .element-success\@lg {
    background: green;
  }
}

This mixin combines the functionality of breakpoint-all() and prop-map() to generate the @content of all the various breakpoint sizes while looping through the provided $map.

Here is a real world example of this mixin being used in the seed-display pack:

• the map (scss)
• breakpoint-prop-map (scss)
• output (css)

Breakpoint sizes

By default, seed-breakpoints comes with 5 breakpoints with values borrowed from Bootstrap V4’s grid system. These values can be modified by adjusting the $seed-breakpoints map in your project.

Responsive modifiers

CSS classes generated with mixins such as breakpoint-all() or breakpoint-prop-map(), seed-breakpoints automatically receive an @<breakpoint> suffix. This follows the naming convention established by ITCSS as well as the design principles of mobile first.

It starts with no suffix as for mobile viewports. It then works it’s way up from @sm - @lg to handle smaller viewports (Phablets) to larger viewports (Desktops).

Example The <h1> starts off with a default (mobile) size of tx-h5 (specified by a heading class from seed-typography). As the viewport increases, the font size also increases as specified by the additional heading sizes with @ breakpoint classes.

<h1 class="tx-h5 tx-h4@sm tx-h3@md tx-h1@lg">
  Resize your browser, and watch me shrink/grow!
</h1>

Configurations

Below are the default Sass configuration variables for seed-breakpoints. The variables can be found in the pack’s _config.scss file.

seed-breakpoints/_config.scss

// Namespaces
$seed-breakpoints-at-namespace: \@ !default;

// Breakpoints
$seed-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px
) !default;

Related

• seed-grid
• seed-props