Versions Compared

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

contents

content, 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

The header organism always consists of a navigation molecule, logo atom and

setting are obligatory

toolbar molecule.

More information about the header can be found here: ID2 - Header

Table of Contents
maxLevel5
minLevel3

Web_max Dashboard Spacing

Image Removed

Info
iconfalse
titleZeplin Documentation

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

Web_Max Dont's

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--
Column Width784.875
Content-Area Margin241,5


Image Added
Web_Max/Molecules_Spacing

Image AddedWeb_Max/Atomic_Spacing



Web_Max Dashboard Themes

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



Image AddedWeb_Max/Dashboard

Image Removed
Place the boardlets freely on the grid

Image Removed
The boardlets must never be placed outside of the column-grid

Image Removed
Boardlets must never cross the column grid left and right

Web_Max EdgeOne-Dashboard

Image RemovedWeb_Max/Dashboard_EdgeOne

_Astronaut


Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide

of this componenteImage Removed




Image Added
Web_Max/Dashboard

_EdgeOne

Image Removed
Web_Max/Dashboard_X-Series_Astronaut

_Tokyo-at-Night

Web_Max X-Series-Dashboard


Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide

of this componente:
coming soonImage Removed
Web_Max/Dashboard_X-Series_Tokyo-at-Night