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.

Theme ch [FIX] Screen size XL
html

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.

Theme de [FIX] Screen size XL
html

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.

Theme us [FIX] Screen size XL
html