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.
🔍 On this page:
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
) !default;
@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; }
}
}
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 */
}
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 */
}
How to edit the breakpoints #
To edit the default breakpoints, you'll need to copy the $breakpoints SASS map (removing 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';
Because we use SASS !default
flag in the base/_breakpoints.scss file, your custom breakpoints will overwrite the ones in the framework (even if yours are defined before).
If you create a _breakpoints.scss file in the 'custom-style' folder and define your custom breakpoints there, make sure to import it before the 'base' style:
@import 'custom-style/breakpoints';
@import 'base';
@import 'custom-style';