Breakpoints - v3

• Breakpoints List
• Breakpoint Mixin
• Edit the breakpoints
• CodyFrame v2

Breakpoint options in CodyFrame v3.

Breakpoints List #

Here's the list of the default breakpoints:

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

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

How to use the breakpoint mixin #

To add a media query, use the breakpoint mixin:

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

Optionally, you can pass an additional $logic argument to the mixin. 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 */
}

How to edit the breakpoints #

To edit the breakpoints, modify the SASS map in the style.scss file:

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

@use 'custom-style';

CodyFrame v2 #

If you're using CodyFrame v2 (node-sass), copy the $breakpoints SASS map (remove the !default flag) and import your custom breakpoints before the 'base' and 'custom-style' files of the framework.

$breakpoints: (
  xs: 32rem,
  sm: 48rem,
  md: 64rem,
  lg: 80rem,
  xl: 90rem
);

@import 'base';
@import 'custom-style';