breakpoints. made easy.

Sass mixin for managing breakpoints inside your project with a simple, human-readable syntax.

@include breakpoint(from mobile-small to desktop-large)
View on Github Download .zip Download .tar.gz

installation

with npm

npm install rs-breakpoints

After importing rs-breakpoints into your project, add this at the beginning of your main Sass file:

@import '/node_modules/rs-breakpoints/index';

usage

@include breakpoint(from SMALL-BREAKPOINT to LARGE-BREAKPOINT)
 Where SMALL-BREAKPOINT and LARGE-BREAKPOINT can be a value or one of the predefined breakpoints.

The breakpoints mixin makes use of familiar syntax from the English language, such as the prepositions from and to.

For easier use, the mixin also comes with a list of predefined breakpoints. There are three types of "devices" (mobile, tablet, desktop), each one has 3 variant sizes (small, medium, large). The breakpoints are a combination of the two (mobile-small, desktop-large, etc.).

predefined breakpoints

The predefined breakpoints are chosen for easier use. If you want to change them, see the advanced section.

  • mobile-small
  • mobile-medium
  • mobile-large
  • tablet-small
  • tablet-medium
  • tablet-large
  • desktop-small
  • desktop-medium
  • desktop-large

codepen playground

Resize the window or the embeded codepen (bottom right corner) to see the mixin in action.

See the Pen Example file for breakpoint mixin by Razvan Spatariu (@RazvanDH) on CodePen.

examples

custom values

.example {
    @include breakpoint(from 50em to 1024px) {
      // your CSS here
    }
  }

between two breakpoints

.example {
    @include breakpoint(from mobile-small to mobile-large) {
      // your CSS here
    }
  }

only a minimum breakpoint

.example {
    @include breakpoint(from mobile-small) {
      // your CSS here
    }
  }

only a maximum breakpoint

.example {
    @include breakpoint(to desktop-small) {
      // your CSS here
    }
  }

advanced

custom list of breakpoints

If you want to define your own list of breakpoints, define a map with the name $breakpoints-values.

$breakpoints-values: (
  i-like-small-breakpoints: 150px,
  weird-breakpoint: 10em,
  is-this-even-a-breakpoint: 30rem
);

.example {
  @include breakpoint(from i-like-small-breakpoints to weird-breakpoints) {
    // your CSS
  }
}

ie8 stylesheet

If you are building a separate stylesheet for IE8, set the variable $breakpoints-ie8 in your IE8 only stylesheet after importing the mixin. This will create a stylesheet that ignores all breakpoints that have a maximum value, while dropping the media query for those that don't.

$breakpoints-ie8: true;

.example {
  @include breakpoint(to desktop-small) {
    // this will be ignored
  }

  @include breakpoint(from mobile-small) {
    // this will be compiled in the IE8 stylesheet without the media query wrapper
  }
}