Page History
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 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.
| Units | |
|---|---|
| Grid Columns | 24 |
| Base | px | rem |
|---|---|---|
| Breakpoint |
| ≥1800px |
| n.n | ||
| Width | 1920 | 120 |
| Height |
| 928 | 58 | |
| Content Area | ||
|---|---|---|
| Column Width | 78 | 4.875 |
| Margin left | 24 | 1,5 |
| Margin right | 24 | 1,5 |
| Marin bottom | 16 | 1 |
| Header Area | ||
|---|---|---|
| Header | 72 | 9 |
| Icon max | 24 | 1,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.
| Unit | rem | |
|---|---|---|
| Indent left | 24 | 1, |
| 5 |
| Indent right | 24 | 1, |
| 5 |
| Margin left |
| 24 | 1 |
Space betweenÂ
Elements
| ,5 | ||
| Margin right | 24 | 1,5 |
| Marin bottom | 16 | 1 |
| Units | |
|---|---|
| Grid rows | 12 |
Different assets within the design kit have different heights. Basic, Small, Medium and Large. These sizes have fixed dimensions indicated in rows.
| Row | px | rem | |
|---|---|---|---|
| §row-01 | basic | 24 | 1,5 |
| §row-02 | Small | 40 | 2,5 |
| §row-03 | Medium | 56 | 3,5 |
| §row-04 | Large | 72 | 4,5 |
EdgeOne Dashboard example
The 24 Columns Gutter
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.
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.
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.
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)
| Units | |
|---|---|
| Nested Columns | 12 |
| Children Display | ||||||
|---|---|---|---|---|---|---|
|
| title | This is a work in progress. Not final!!! |
|---|
Best PracticeÂ
Dark and Light Theme.
| title | This is a work in progress. Not final!!! |
|---|
comming soon, more infos needed
