Versions Compared

Key

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

Tablet Basics

The dashboard always consists of two organism, a header and the content area. But in the tablet breakpoint there is the possibility to add another molecule: the sandbox molecule. This is advantageous for a quick start and replaces the floting sidebar. The content area can be designed freely, all content must adhere to the 24-column grid. The content may not be positioned freely within the column grid. An overlay must be used for this. All content, in the best case boardlets, start at the top left. They must be placed next to and below each other within the column grid. The header organism always consists of a navigation molecule, logo atom and toolbar molecule.


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

tablet_landscape
(px)

tablet_landscape
(rem)

tablet_portrait
(px)

tablet_portrait
(rem)

Breakpoint≥960px-≥576px-
Width10246476848
Height--102464
Column Width422.625311.938
Content-Area Margin80,580.5
Sandbox



Height644644



TabletLandscape tablet/Molecules_Spacing

TabletAtomic_SpacingLandscape tablet/Atomic_Spacing

Image Added
Portrait tablet/Molecules_Spacing

Image AddedPortrait tablet/Atomic_Spacing



Tablet Dashboard Themes

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

Image Added1024/Dashboard_Astronaut

Image Added768/Dashboard_Astronaut


Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide:
coming soon


Image Added1024/Dashboard_Tokyo at night

Image Added
768/Dashboard_Tokyo at night


Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide:
coming soon