Page History

Table of contents

1. The 24 Columns Grid

1. 
   - Spacing and Details
   
   
2. The 24 Columns Gutter
   
   
3. EdgeOne Dashboard examplex
   - 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 Removed

Spacing of the 
Smartphone Portraitportrait.

Here you can find all important values for building the smartphone the Smartphone portrait grid. The grid is divided into two main containers. the header area and the content area.

px

rem

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.

Best Practice 
Dark Theme.

Best Practice 
Light Theme.

Image Added

Dashboard example.

The display within Mobile Dashboard behaves differently than the other sizes. Within mobiles, the boardlets transform into cards. The cards serve as a summary or status of the respective boardlet. The cards can be opened by a drill down, or are multilevel content as needed. There is no visual difference between X-Series and EdgeOne in mobile use.

This could be the layout of the cards within this display. The Edge One/X-Series

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.

Best Practice 
Dark Theme.

Best Practice 
Light Theme.

Image Added

Image Added

Image Added