Versions Compared

Old Version 21

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.

Web_Max Basics

The Dashboard dashboard always consists of two organism, a header and the content area. The content area can be designed freely designed, all content must adhere to the 24-column - grid.  The The content may not be positioned freely positioned within the column - grid. Overlay An overlay must be used for this. All contentscontent, in the best case boardlets, start at the top left. They must be placed next to each other and below each other within the column - grid. In the header, burgers, datepicker, logo and setting are obligatory. More information about the header can be found here: ID2 - HeaderThe header organism always consists of a navigation molecule, logo atom and toolbar molecule.

More details you will find here.






Image Added
Basic Templates of the Dashboard







Dashboard Spacing

All molecules and the atoms within them have a fixed spacing. This spacing is to place the molecules more precisely within the organism. Within the molecule the atoms also have a fixed spacing to each other. The spacing within the atoms is always the same, it varies only slightly from breakpoint to breakpoint. The spacing of the molecules is flexible. You only have to make sure that it is in the range from Spacing_1 to Whitespacing_7. This gives the design of the software an independent, visually attractive and continuous appearance.


Base

web_max
(px)

web_max (rem)

Breakpoint≥1800px-
Width1920120
Height--
Content Area
Column Width784.875
Gutter26
1.625
Content-Area Margin
241,5Header Area
Header-Area
24
1,5Icon max241,5Icon min
18
1,
125ScrollableyesNavi and ToolbarHeight--

More details you will find here.

Table of ContentsmaxLevel
5
minLevel3


Image Modified
Web_Max/

Dashboard

Molecules_Spacing

Web_max Dashboard Spacing

Image Modified

Web_Max/
Component
Atomic_Spacing



Web_Max Dashboard Themes

All templates and pages exist in two themes, the Astronaut(light) and the Tokyo at Night Theme(dark).



Web_Max/Dashboard_Astronaut


Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide of this componente:
zpl.io/bzZlmM7





Web_Max/Dashboard_Tokyo-at-Night


Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide of this componente:
https://zpl.io/2pGEvMQ