Breakpoints
Breakpoint options in CodyFrame.
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 #
Here's an example of how to use the mixin to add a media query:
@include breakpoint(md) {
/* your code here */
}
Which outputs in CSS:
@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 */
}
The media query above will limit the style to the 'small' breakpoint; it's similar to 'max-width: 32rem', except the style is not applied when the viewport width is 32rem.
You can use the $logic argument to combine multiple types of features as well. For example:
@include breakpoint(sm, "(orientation: landscape)") {
/* your code here */
}
This will be converted to:
@media (orientation: landscape) 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' with (
$breakpoints: (
'xs': 32rem,
'sm': 48rem,
'md': 64rem,
'lg': 80rem,
'xl': 90rem
),
$grid-columns: 12
);
@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';