Breakpoints

The 📁 base/_breakpoints.scss file contains a SASS map with the breakpoints values.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

Breakpoints List #

Here's the list of all available breakpoints:

$breakpoints: (
  xs: 32rem, // ~512px
  sm: 48rem, // ~768px
  md: 64rem, // ~1024px
  lg: 80rem, // ~1280px
  xl: 90rem  // ~1440px
);

@mixin breakpoint($breakpoint, $logic: false) {
  @if( $logic ) {
    @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
  } @else {
    @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
  }
}

The framework is mobile first, so the breakpoint mixin targets only the min-width of the viewport.

Here's an example of how to use the mixin to add a media query:

@include breakpoint(md) {
    /* your code here */
}

This will be converted to:

@media (min-width: 64rem) {
  /* your code here */
}

If you need to use more advanced media queries, you can pass an additional $logic argument to the mixin as well. For example:

@include breakpoint(sm, "not all") {
  /* your code here */
}

 This will be converted to:

@media not all and (min-width: 32rem) {
  /* your code here */
}