Page History
Table of contents
-Â Spacing and Details
The 24 Columns Gutter
EdgeOne Dashboard example
- Best Practice Dark and Light Theme
X-Series Dashboard example
- Best Practice Dark and Light Theme
| 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,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 for the use of a gutter.
EdgeOne Dashboard example.
In this example, you can see how the 12-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.
This is how the division of the boardlets within this representation could look like. The Edge One/dSFM layout serves as an example.
Best PracticeÂ
Dark and Light Theme.
X-Series Dashboard example.
In this example, you can see how the 1224-column grid/ 12 row without and with gutter 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.
This is how the division of the boardlets within this representation could look like. The X-Series/Objective layout serves as an example.
| title | This is a work in progress. Not final!!! |
|---|
Best PracticeÂ
Dark and Light Theme.
| title | This is a work in progress. Not final!!! |
|---|
Two different Boardlets Grids.
There are basically two different boardlet grids. One for graphic content and one for regular content. These differ only slightly in padding.
More Details about Boardlets you will find here:
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 |
Regular content
Graphic content
| Children Display | |||||
|---|---|---|---|---|---|
|
|
