Responsive breakpoints
There are a set of predefined media queries available. They are set after different sizes of the most used screensizes of different devices.
Below you can see a box that have a different background color, depending on what breakpoint is active. Try and resize your browser window to see it in action.
Responsive breakpoints
Component status: WIP
Types
The following breakpoints are implemented. Mobile first applies, meaning all styling is done from a benchmark mobile screen width of 320px portrait mode, and then gets enhanced as screen size increases.
– screen-xs: 567px (mobile landscape)
– screen-sm: 768px (tablet portrait)
– screen-sm-plus: 950px (large tablet/very small desktop)
– screen-md: 1000px (tablet landscape/small desktop)
– screen-lg: 1150px (desktop+)
– screen-xl: 1280px
– screen-xxl: 1440px
– screen-xxxl: 1680px
When these breakpoints are used in media queries, values are transformed to "em".
Types
Component status: Done
The following breakpoints are implemented. Mobile first applies, meaning all styling is done from a benchmark mobile screen width of 320px portrait mode, and then gets enhanced as screen size increases.
– screen-xs: 567px (mobile landscape)
– screen-sm: 768px (tablet portrait)
– screen-sm-plus: 950px (large tablet/very small desktop)
– screen-md: 1000px (tablet landscape/small desktop)
– screen-lg: 1150px (desktop+)
– screen-xl: 1280px
– screen-xxl: 1440px
– screen-xxxl: 1680px
When these breakpoints are used in media queries, values are transformed to "em".