Versions Compared

Old Version 4

changes.mady.by.user Ron Oemus

Saved on

compared with

New Version 5

changes.mady.by.user Ron Oemus

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of contents

  1. The 24 Columns Grid
    - Spacing and Details

  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

Image Removed

only applies within the content area.
The grid has no column space, all distances are solved via the margin.


Spacing of the 

web

Web min.

Here you can find all important values for building the

tablet portrait

web min grid. The grid is divided into two main containers. the header area and the content area.

Image Added


Base

px

rem

Breakpoint131282
Width
800
1280
48
80
Height
1024
800
64
50
Margin16
80,5
1
Content Area

Columns
8
24-
Column Width
87
52
5
3.
438
25
Gutter161
Header Area

Header241,500
Column Space80,500Gutter80,500Header483
Icon max
48
24
3
1,500
Icon min
n.nn.n

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 Removed

161

Space between 
Elements

120.75

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.

Info
titleThis is a work in progress. Not final!!!
Best Practice 
Dark Theme.
Info
titleThis is a work in progress. Not final!!!
Best Practice 
Light Theme.
Info
titleThis is a work in progress. Not final!!!
Image Removed