Skip to main content

Breakpoints

Read all breakpoint mixins

Overview

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.

NameMixinsViewport (Min-width)Description
Extra-small (xs)@mixin screen-xs-up12.5remSmartphone
Small (sm)@mixin screen-sm-up36remTablet
Medium (md)@mixin screen-md-up48remTablet
Large (lg)@mixin screen-lg-up67.5remLaptop
Extra-large (xl)@mixin screen-xl-up87.5remDesktop
Extra-extra-large (xxl)@mixin screen-xxl-up100rem (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;
}
}

Check out the container utility