The basic unit

The basis for the grid of the design system is rem. The smallest unit within the system is 0.125 rem. Variants of 0,125 rem form the dimensions of columns, rows and boxes as well as their edges and fillings. The 0,125 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

Basically there are two ways to display content inside the dashboard. On a boardlet or as freestanding content. Columns and Gutter define how you handle these two possibilities.

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
Dark Theme






Breakpoints

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.



Breakpointssize (px)columns size (%)padding (rem)margin (unit)gutter (unit)
Small328425%0,25 rem1,5 rem1,5 rem
Tablet upright720812.5%0,25 rem1,5 rem1,5 rem
Tablet landscape984128.33%0,25 rem1,25 rem1,5 rem
Web 12801224128.33%0,25 rem1,75 rem1,5 rem
Web 19201873244,16%0,25 rem1,5 rem1,5 rem




Grid examples
Desktop_Max




Grid examples
Desktop_Min




Grid examples
Tablet_Landscape




Grid examples
Tablet_Upright




Grid examples
Mobile




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

Header