Responsive Design
This Style Guide works with CSS breakpoints to enable a responsive design. A breakpoint is the point at which the design changes for the size of the viewport.
We use abbreviations for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the styles properties at each breakpoint.
Breakpoint | Syntax | Range | address |
---|---|---|---|
Extreme Small | xs | [0px, 575px] | smartphones (portrait) |
Small | sm | [576px, 767px] | smartphones (landscape) & tablets (portrait) |
Medium | md | [768px, 991px] | tablets (landscape) |
Large | lg | [992px, 1199px] | browser window size |
Extreme Large | xl | [1200px) | huge browser |
Implementation information
To make it easier to use, we use four ready-made functions with the help of which we can better address the breakpoint ranges.
- Styles under
at($breakpoint)
included all screen sizes in the given breakpoint range. - Styles under
from($breakpoint)
included all screen sizes up to the upper limit of the given breakpoint range. - Styles under
until($breakpoint)
included all screen sizes from the lower limit of the given breakpoint range. - Styles under
between($lower-breakpoint, $upper-breakpoint)
included all screen sizes from the lower limit of the lower breakpoint range and up to the upper limit of the upper breakpoint range.
Breakpoint: 0 576px 768px 992px 1200px
├─────────┼─────────┼─────────┼─────────┼─────────>
Slice: · xs · sm · md · lg · xl
· · · · ·
· · · at(md) · ·
· · ├────────┤· ·
· · · · ·
· · ·from(md) · ·
· · ├─────────────────────────────>
· · · ·
· · until(md) · ·
├────────────────────────────┤· ·
· ·
· between(sm, lg) ·
├────────────────────────────┤·
The following example shows the media query results when we apply the standard breakpoints to the four breakpoint functions.
Mixin | Resulting media query |
---|---|
at(md) | (min-width: 768px) and (max-width: 991px) |
from(md) | (min-width: 768px) |
until(md) | (max-width: 991px) |
between(sm, lg) | (min-width: 576px) and (max-width: 1199px) |
Theme
The standard breakpoint ranges can be redefined by the different themes. However, all 5 ranges (xs, sm, md, lg, xl) must always be defined or at least an alternative must be given.
finanzen.ch
finanzen.ch use the default breakpoint ranges.
0 576px 768px 992px 1200px
└─┬─── └─┬──── └──┬─── └──┬──── └──┬──
xs sm md lg xl
└───────────┬───────── └───────┬──────
mobile desktop
ATTENTION The following example was built especially for this documentation and cannot be used on the live pages.
finanzen.net
finanzen.ch use the default breakpoint ranges.
0 576px 768px 992px 1200px
└─┬─── └─┬──── └──┬─── └──┬──── └──┬──
xs sm md lg xl
└───────────┬───────── └───────┬──────
mobile desktop
ATTENTION The following example was built especially for this documentation and cannot be used on the live pages.
Markets Insider
The breakpoints of Markets Insider uses somewhat atypical breakpoint ranges, but these were given by the US colleagues.
0 375px 600px 960px 1260px
└─┬─── └─┬──── └──┬─── └──┬──── └──┬──
xs sm md lg xl
└───────────┬───────── └───────┬──────
mobile desktop
ATTENTION The following example was built especially for this documentation and cannot be used on the live pages.