Table of contents





The 24 Columns Grid.

The foundation of the design system is the modified bootstrap frontend grid. this grid has 24 columns within the dashboard and 12 columns within the boardlets. The dashboard is divided into two parts, header and content area. The 24 Columns Grid only applies within the content area.
The grid has no column space, all distances are solved via the margin.


Spacing of the 
Web max.

Here you can find all important values for building the web max grid. The grid is divided into two main containers. the header area and the content area.


Base

px

rem

Breakpoint≥1800pxn.n
Width1920120
Height92858
Content Area

Columns24-
Column Width784.875
Margin left241,5
Margin right241,5
Marin bottom161
Header Area

Header729
Icon max241,5



The 24 Columns Gutter.

Gutters may be missing as shown above or present as shown below. For closely related content, you should consider an Gutters free layout. Use the gutter if the content requires more separation.






pxrem
Columns24-
Indent left241,5
Indent right241,5
Margin left241,5
Margin right241,5
Marin bottom161



The Row.

...





pxrem
rows12-



EdgeOne Dashboard example.

In this example, you can see how the 24-column grid behaves within the differently sized boardlets. Here you can also see why the grid does not have a column space. This would mean that the spaces within the boardlets would be different widths. For this reason, distances are determined by margin.




Common dashboard with 4 Boardlets aligned to the 24 columns grid/12 rows

Common dashboard with 10 Boardlets aligned to the 24 columns grid/ 12 rows

Common dashboard with Boardlets, Cards and Free-standing-content (aligned to the gutter)





Nested Grid.

All main components, to be found under ID2-ID3 have a 12 column nested grid.
The nested grid is possible with or without 24px padding. Nested grids never have rows.