Table of contents
- The 24 Columns Grid
- 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 - Two different Boardlets-Grids
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 min.
Here you can find all important values for building the web min grid. The grid is divided into two main containers. the header area and the content area.
| Base | px | rem |
|---|---|---|
| Breakpoint | 1312 | 82 |
| Width | 1280 | 80 |
| Height | 800 | 50 |
| Margin | 16 | 1 |
| Content Area | ||
| Columns | 24 | - |
| Column Width | 52 | 3.25 |
| Gutter | 16 | 1 |
| Header Area | ||
| Header | 24 | 1,500 |
| Icon max | 24 | 1,500 |
| Icon min | 16 | 1 |
Space between | 12 | 0.75 |
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.
Example for the use of a gutter.
