The Unit
The basic unit for the grid is the 4-pixel square Mini Unit (1/1 Unit). Variants of Mini Units form the dimensions of columns, rows and boxes as well as their edges and fillings. The mini-unit 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.
Columns and Gutter Padding
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
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) | size (%) | padding (px) | padding (unit) | margin (px) | margin (unit) | gutter (px) | gutter (unit) |
|---|---|---|---|---|---|---|---|---|---|---|
| Small | 328 | 4 | 1/1 | 25% | 4 px | 1/1 | 24 px | 6/1 | 24 px | 6/1 |
| Tablet upright | 720 | 8 | 2/1 | 12.5% | 4 px | 1/1 | 24 px | 6/1 | 24 px | 6/1 |
| Tablet landscape | 984 | 12 | 3/1 | 8.33% | 4 px | 1/1 | 20 px | 5/1 | 24 px | 6/1 |
| Web 1280 | 1224 | 12 | 3/1 | 8.33% | 4 px | 1/1 | 28 px | 7/1 | 24 px | 6/1 |
| Web 1920 | 1873 | 24 | 6/1 | 4,16% | 4 px | 1/1 | 24 px | 6/1 | 24 px | 6/1 |
Grid Examples
Gutter Examples
Header
The header contains all main functions of the software. This includes navigation, time with a global time menu, product logo, search, general settings and messenger.
More Details you will find here
