Page History

Table of contents

1. The 24 Columns Grid
   - Spacing of the Web max
2. The 24 Columns Gutter
3. EdgeOne Dashboard example
   - Best Practice  Dark and Light Theme
4. X-Series Dashboard example
   - Best Practice Dark and Light Theme
5. 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.

Image Added

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

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

Image Added

X-Series Dashboard exampleEdgeOne Boardlet 12 Columns Grid.

In this example, you can see how the 12 columns -column grid 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.

Image Removed

X-Series Boardlet example, 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.

comming soon, more infos needed

Image Added

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.