Breakpoints
To easily apply CSS depending on the onyx breakpoint, we offer a SCSS mixin you can use.
For further information, please see the design documentation.
The following breakpoints are supported:
scss
$breakpoints: (
"2xs": 320px,
xs: 576px,
sm: 768px,
md: 992px,
lg: 1440px,
xl: 1920px,
);
Usage (Media Queries)
scss
@use "sit-onyx/breakpoints.scss";
.some-class {
@include breakpoints.screen(max, sm) {
// your styles for md screens and smaller
}
@include breakpoints.screen(min, md) {
// your styles for md screens and larger
}
// the breakpoint is inclusive so if you e.g. want to use
// min and max for the same breakpoint you should
// define an offset for either min or max
@include breakpoints.screen(max, xl) {
// your styles for smaller and equal xl screens
}
@include breakpoints.screen(min, xl, $offset: 1) {
// your styles for greater than xl screens (exclusive)
}
}
Container queries
There is also an equivalent for using container queries instead of media queries so the breakpoint is considered for the element width instead if the whole viewport.
Make sure to set the container-type
CSS property accordingly, otherwise the container query will not work.
scss
@use "sit-onyx/breakpoints.scss";
.some-class {
container-type: size;
@include breakpoints.container(max, sm) {
// your styles for md containers and smaller
}
@include breakpoints.container(min, md) {
// your styles for md containers and larger
}
// the breakpoint is inclusive so if you e.g. want to use
// min and max for the same breakpoint you should
// define an offset for either min or max
@include breakpoints.container(max, xl) {
// your styles for smaller and equal xl containers
}
@include breakpoints.container(min, xl, $offset: 1) {
// your styles for greater than xl containers (exclusive)
}
}
Use in JavaScript
If you need to access the breakpoints via JavaScript (e.g. inside a ResizeObserver
), you can import them like so:
ts
import { ONYX_BREAKPOINTS } from "sit-onyx";
console.log(`Width for sm breakpoint is: ${ONYX_BREAKPOINTS.sm}px`);