Versions Compared

Old Version 4

changes.mady.by.user Ron Oemus

Saved on

compared with

New Version Current

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
Grid
  1. 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 only applies within the content area.
The grid has no column space, all distances are solved via the margin.

Image Removed


Spacing of the 
web 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.

Image Added


Base

px

rem

Breakpoint≥1200pxn.n
Width
1920
1280
120
80
Height
1080
800
67.5Margin281.75
50
Content Area

Columns24-
Column Width
704,375
523.25
Gutter161
Margin161
Header Area
Column Space80,500Gutter241,500


Header241,500
Icon max241,500
Icon min161



Zeplin Documentation:

zpl.io/aN8rovN


Download Inspire Design KIT:

http://www.ronoemus.com/Brand_x/032020_DESIGN_KIT_INSPIRE_V1.1.zip


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.




Image Added

Example for the use of a gutter.


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 marginEdgeOne 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 Added

Best Practice 
Dark and Light Theme.

Image Removed


Image Added

Image RemovedImage Added



X-Series Boardlet exampleSeries 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 X-Series/Objective layout serves as an example.

Info
titleThis is a work in progress. Not final!!!




Image Added

Best Practice 
Dark and Light Theme.

Info
titleThis is a work in progress. Not final!!!



Image Added


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.

Image Removed


More Details about Boardlets you will find here:

Children Display
pageID3 Interaction Templates
excerptTyperich content
first10



Regular content