Breakpoints

• Breakpoints map
• Breakpoint mixin

How to customize the breakpoints in CodyFrame.

Breakpoints map #

To edit the breakpoints, pass the $breakpoints map to the config module in your style.scss file:

@use 'config' as * with (
  $breakpoints: (
    'xs': '32rem',
    'sm': '48rem',
    'md': '64rem',
    'lg': '80rem',
    'xl': '90rem'
  )
);

When you modify the breakpoints, all the utility classes are automatically generated.

Breakpoint mixin #

To add a media query, use the min-width and max-width SASS mixins:

@include min-width(md) {
  /* from breakpoint md */ 
}

@include max-width(md) {
  /* until breakpoint md */
}

Which, is CSS, compile to:

@media (min-width: 64rem) { 
  /* from 64rem */ 
}

@media not all and (min-width: 64rem) { 
  /* until 64rem */
}