Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Image Removed


Spacing of the 
web 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.

Image Added



Units
Grid Columns24


Base

px

rem

Breakpoint
1584
≥1800px
99
n.n
Width1920120
Height
108067.
92858
Content Area

Column Width784.875
Margin left241,5
Margin right241,5
Content AreaColumns24-Column Width784.875Gutter261.625Header AreaHeader
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.




Image Added



Unitrem
Indent left241,
500
5
Icon max
Indent right241,
500
5
Icon min
Margin left
16
241

Space between 
Elements

221.375
,5
Margin right241,5
Marin bottom161



The Row.

...



Image Added



Units
Grid rows12


Different assets within the design kit have different heights. Basic, Small, Medium and Large. These sizes have fixed dimensions indicated in rows.


Row
pxrem
§row-01basic241,5
§row-02Small402,5
§row-03Medium563,5
§row-04Large724,5



EdgeOne Dashboard example

The 24 Columns Gutter

Image Removed

EdgeOne Boardlet example.
This is how the division of the boardlets within this representation could look like. The Edge One/dSFM layout serves as an example.

Image Removed

EdgeOne Boardlet 12 Columns Grid.

In this example, you can see how the 12 columns grid 24-column grid/ 12 row without and with gutter behaves within the different differently sized bordletsboardlets. Here you can also see why the grid has no columns does not have a column space. It This would mean that the distances spaces within the different sized boardlets would be different widths. For this reason all components have a margin.

Best Practice 
Dark and Light Theme.

Image Removed

Image Removed

X-Series Boardlet example.
This is how the division of the boardlets within this representation could look like. The X-Series/Objective layout serves as an example.

, distances are determined by margin.




Image Added

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

Image Added

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

Image Added

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.



Image Added



Units
Nested Columns12


Children Display
pageID3 Interaction Templates
excerptTyperich content
first10
Info
titleThis is a work in progress. Not final!!!

Best Practice 
Dark and Light Theme.

Info
titleThis is a work in progress. Not final!!!

comming soon, more infos needed

comming soon, more infos needed