The basic unit
The basis for the grid of the design system is rem. The smallest unit within the system is 0.25 rem. Variants of 0,25 rem form the dimensions of columns, rows and boxes as well as their edges and fillings. The 0,25 rem adapts to your content while maintaining a constant visual rhythm.
24 Columns Grid
The 24 Columns Grid ist the Base of all. Columns result in key lines. Within the lines all components find their place. all columns have a padding. The margin of the Content box varies within the different displays. An overview can be found below..
Columns and Gutter Padding
the padding within the columns is always the same. We only differentiate here in 0,5 rem(0,25 rem each side) inside the columns and 1,5 rem inside the gutter.
Columns Patting
Gutter Patting
Best Practice
Columns Patting
Best Practice
Gutter Patting
Use this set of standard breakpoints to maintain layout integrity across screen sizes. For best results, test designs and code at each of these standard breakpoints.
| Breakpoints | size (px) | columns | size (%) | padding (rem) | margin (unit) | gutter (unit) |
|---|---|---|---|---|---|---|
| Small | 328 | 4 | 25% | 0,25 rem | 1,5 rem | 1,5 rem |
| Tablet upright | 720 | 8 | 12.5% | 0,25 rem | 1,5 rem | 1,5 rem |
| Tablet landscape | 984 | 12 | 8.33% | 0,25 rem | 1,25 rem | 1,5 rem |
| Web 1280 | 1224 | 12 | 8.33% | 0,25 rem | 1,75 rem | 1,5 rem |
| Web 1920 | 1873 | 24 | 4,16% | 0,25 rem | 1,5 rem | 1,5 rem |
Grid examples
of the different devices.
Gutter examples
of the different devices.
Header
The header is the heart of the software. All buttons with global functions can be found here.
The appearance and the contents vary within the different devices. This is necessary because for example
mobile less details are necessary or the details have to be displayed in multiple levels. This also applies to the header.
More Details about the Header you will find here
