Versions Compared

Old Version 8

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 24 Columns Grid
    - Spacing and Details

  2. Dashboard example




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.


Info
titleImportent for this Breakpoint

no gutter needed. This can be added later optionally, if we recognize in the conception that one is needed after all.


Spacing of the 
Smartphone portrait.

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



Grid & Header Padding0.5
Base

px

rem

Breakpoint320<576px20n.n
Width (iphone 6)37523.438
Height (iphone 6)66741.68860.375
Content Area

Columns24-
Column Width150.938
Guttern.nn.n
Margin60.375
Header Area

Header483
Icon max483
Icon minn.nn.n

Space between 
Elements

8
Navi and Toolbar

Height644



Zeplin Documentation:

zpl.io/VD9gBoe

Download Inspire Design KIT:

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




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 serves as an example.


Info
titleImportent for this Breakpoint

Within this example, we need more information from the product providers and a basic concept of the UPW and X-Series.





Image RemovedImage Added

Image RemovedImage Added