Breakpoints
Read all breakpoint mixinsOverview​
Breakpoints are the stage where website changes and adapts based on user viewport size. Ravenbright is mobile-first
CSS library which has 6 key breakpoints where the design and the content of layout may shift.
All breakpoints are fluid, except until it reaches the width of 1440px, they will become fixed.
Name | Mixins | Viewport (Min-width) | Description | |
---|---|---|---|---|
Extra-small (xs) | @mixin screen-xs-up | 12.5rem | Smartphone | |
Small (sm) | @mixin screen-sm-up | 36rem | Tablet | |
Medium (md) | @mixin screen-md-up | 48rem | Tablet | |
Large (lg) | @mixin screen-lg-up | 67.5rem | Laptop | |
Extra-large (xl) | @mixin screen-xl-up | 87.5rem | Desktop | |
Extra-extra-large (xxl) | @mixin screen-xxl-up | 100rem (max-width) | Desktop |
--rbrh-screen-sm: 36rem;
--rbrh-screen-md: 48rem;
--rbrh-screen-lg: 67.5rem;
--rbrh-screen-xl: 87.5rem;
--rbrh-screen-xxl: 100rem;
Customizing with PostCSS mixin plugin​
Ravenbright uses PostCSS mixin to make it easier when writing breakpoints. This code below is placed in mixin directory.
@define-mixin screen-xs-up {
@media (min-width: 12.5rem) {
@mixin-content;
}
}
@define-mixin screen-sm-up {
@media (min-width: 36rem) {
@mixin-content;
}
}
@define-mixin screen-md-up {
@media (min-width: 48rem) {
@mixin-content;
}
}
@define-mixin screen-lg-up {
@media (min-width: 67.5rem) {
@mixin-content;
}
}
@define-mixin screen-xl-up {
@media (min-width: 87.5rem) {
@mixin-content;
}
}
@define-mixin screen-xxl-up {
@media (min-width: 100rem) {
@mixin-content;
}
}
Usage​
You can place the @mixin inside the selector in this way below.
.button-group {
display: grid;
@mixin screen-xs-up {
grid-template-columns: repeat(1, minmax(0, 1fr));
width: 100%;
}
@mixin screen-sm-up {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: fit-content;
}
}