Versions Compared

Key

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

The Grid

Spacing of the 
Smartphone Portrait.

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


px

rem

Width37523.438
Height66741.688
Margin80,5



Columns4-
Column Width845,25
Column Space80,5
Gutter80,5



Header241,500
Icon max483
Icon minn.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.




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!!!