Breakpoints

Pack name: seed-breakpoints

Breakpoints (media query) mixin pack for Seed

Contents

Install

npm install seed-breakpoints --save

Dependencies


Basic mixins

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

breakpoint

breakpoint($size)

example.scss
.element {
  @include breakpoint(md) {
    background: red;
  }
}
example.css
@media (min-width: 544px) {
  .element {
    background: red;
  }
}

$size

Type: size / number

See a list of the default breakpoint sizes.

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


breakpoint-between

breakpoint-between($min, $max)

example.scss
.element {
  @include breakpoint-between(md, lg) {
    background: red;
  }
}
example.css
@media (min-width: 544px) and (max-width: 768px) {
  .element {
    background: red;
  }
}

$min, $max

Type: size / number

See a list of the default breakpoint sizes.

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


breakpoint-max

breakpoint-max($size)

example.scss
.element {
  @include breakpoint-max(md) {
    background: red;
  }
}
example.css
@media (max-width: 768px) {
  .element {
    background: red;
  }
}

$size

Type: size / number

See a list of the default breakpoint sizes.

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


breakpoint-min

breakpoint-min($size)

example.scss
.element {
  @include breakpoint-min(md) {
    background: red;
  }
}
example.css
@media (min-width: 768px) {
  .element {
    background: red;
  }
}

$size

Type: size / number

See a list of the default breakpoint sizes.

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


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;
  }
}

$map
Type: map (Required)

$properties
Type: list (Required)

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:


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.

Modifier Mixin activates when…
xs the viewport is smaller than 543px.
sm the viewport is larger than 544px.
md the viewport is larger than 768px.
lg the viewport is larger than 992px.

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).

Modifier Activates…
-- Always.
@sm when the viewport is larger than 544px.
@md when the viewport is larger than 768px.
@lg when the viewport is larger than 992px.

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.

Resize your browser, and watch me shrink/grow!

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