Page History
The Unitbasic unit
The basic unit basis for the grid of the design system is the 4-pixel square Mini Unit (1/1 Unit). Variants of Mini Units 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 mini-unit 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 and padding of the Content box varies within the different displays. An overview can be found below..
Columns and Gutter Padding
The the padding within the columns is one Mini Unit (1/1) or one Middle Unit (6/1). This can be determined by the designer depending on the content.
It is recommended to use 1 Mini Unit for boardlets and 1 Middle Unit for content that is free standing.
Columns Patting with Mini Units
Gutter Patting with Middle Units
always the same. We only differentiate here in 0,25 rem 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 (px) | columns (unit)columns | size (%) | padding (pxrem) | padding (unit) | margin (px)margin (unit)gutter (px) | gutter (unit) | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Small | 328 | 4 | 1/125% | 4 px | 1/1 | 24 px | 6/1 | 24 px | 6/1 | 0,25 rem | 1,5 rem | 1,5 rem | |
| Tablet upright | 720 | 8 | 2/112.5%4 px | 0,25 rem | 1/1 | 24 px | 6/1 | 24 px | 6/1 | ,5 rem | 1,5 rem | ||
| Tablet landscape | 984 | 12 | 3/18.33%4 px | 0,25 rem | 1/1 | 20 px | 5/1 | 24 px | ,25 rem | 1,5 rem6/1 | |||
| Web 1280 | 1224 | 12 | 3/1 | 8.33% | 4 px | 1/1 | 28 px | 7/1 | 24 px | 6/1 | 0,25 rem | 1,75 rem | 1,5 rem |
| Web 1920 | 1873 | 24 | 6/1 | 4,16% | 4 px | 1/1 | 24 px | 6/1 | 24 px | 6/1 |
Grid Examples
| 0,25 rem | 1,5 rem | 1,5 rem |
Grid examples
of the different devices.
Gutter examples
of the different devices.Gutter Examples
Header
The header contains all main functions is the heart of the software. This includes navigation, time with a global time menu, product logo, search, general settings and messenger.
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 More Details you will find here
