Breakpoints

Description

Use this mixin for dealing with breakpoints / responsive behaviour.

Usage

Usage example

  1. mobile-small
  2. mobile-medium
  3. mobile-large
  4. tablet-small
  5. tablet-medium
  6. tablet-large
  7. desktop-small
  8. desktop-medium
  9. desktop-large
  10. desktop-x-large
.example {
  // custom values
  @include breakpoint(from 50em to 1024px) {
    // your CSS here
  }

  // between two breakpoints
  @include breakpoint(from mobile-small to mobile-large) {
    // your CSS here
  }

  // only a minimum breakpoint
  @include breakpoint(from mobile-small) {
    // your CSS here
  }

  // only a maximum breakpoint
  @include breakpoint(to desktop-small) {
    // your CSS here
  }
}