Skip to content 
Breakpoints
The breakpoints are the ranges that will stablish how the ZDS adapts to the different devices.
Art-boards
Our design system is design to work in different art board sizes that are segmented scoped breakpoints defined by trigger screen width sizes.
According to our market share study, we've decided to use the following breakpoints and art-boards. These breakpoints are a simplification of the ones used by Bootstrap and the correlation is established in the table.
| Name | Target resolution | Range | Container width | Bootstrap | |
|---|---|---|---|---|---|
| Desktop | 1440 x 800 px | ≥ 1200px | 1110 px | xlxxl | |
| Landscape | 1024 x 768 px | 992px < x ≤ 1199px | 930 px | lg | |
| Portrait | 768 x 1024 px | 768px < x ≤ 991px | 690 px | md | |
| Mobile | 375 x 812 px | 315px < x ≤ 767px | min 315 px * | sm |
You can check the resolution shares in StatCounter.
The shares regarding device type can also checked there. The general distribution is:
Tooling
The @zurich/dev-utils package provides *.scss files with mixins to handle media queries in an easier way. These mixins single target are:
desktop: only targets the desktop size.landscape: only targets the landscape size.portrait: only targets the portrait size.mobile: only targets the mobile size.
And these are the combinations:
landscapeOrSmaller: targets the mobile, portrait, and landscape sizes.portraitOrSmaller: targets the mobile and portrait sizes.portraitOrBigger: targets the portrait, landscape, and desktop sizes.landscapeOrBigger: targets the landscape and desktop sizes.portraitAndLandscape: targets the portrait and landscape sizes.
And example on how to use them, where the color on <h1> will change to red on mobile and portrait sizes:
scss
@use "./node_modules/@zurich/dev-utils/src/SCSS/index.scss" as bp;
@include bp.portraitOrSmaller {
h1 {
color: red;
}
}Intellisense
Check the VSCode recommendations to have a better DX with this tooling.
Minimum viewport
The current minimum viewport resolution supported is 315px. Everything under that value will show a screen explaining that the resolution is not supported in the corresponding document language.
If you use the min-resolution attribute in the <body> tag, you can force this behavior where a message indication so will be shown with localization options.
Dev mode
If you set the dev-mode attribute in the <body> tag, you could visualize the current device art board that is being targeted in the bottom right corner of the screen. This is extremely useful for debugging and design implementations.
Dev CSS!
Remember this requires the @zurich/design-tokens/dev.css import to work. Check the docs.