Versions Compared

Old Version 3

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.

Basics

The

basic framework of the

dashboard always consists of two organism, a header and the content area.

Within the content area are the boardlets. All content is based on the 24 Colum-Grid.The 24 Colum-Grid

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.


More details you will find here.

Table of Contents
maxLevel5
minLevel2
outlinetrue
indent0
class<div>
printablefalse
separatorpipe


Image Added
Basic Components of the Dashboard

The dashboard column-grid

The foundation of the design system is the modified bootstrap

frontend

column-grid.

this

This column-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
iconfalse
titleZeplin Documentation

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

Info
iconfalse
titleDownload Adobe XD UI-Kit

coming soon

All different breakpoints have a 24 column-grid.

Image Added
24 Column-grid of the Dashboard



The dashboard spacing


Base

web_max
(px)

web_max (rem)

web_min
(px)

web_min
(rem)

tablet_landscape
(px)

tablet_landscape
(rem)

tablet_portrait
(px)

tablet_portrait
(rem)

mobile_portrait
(px)

mobile_portrait
(rem)

kiosk
(px)		kiosk
(rem)
Breakpoint≥1800px-≥1200px-≥960px-≥576px-<576px-WiPWiP

Dashboard Spacing

Base

1920 px

1920 rem

Breakpoint≥1800pxn.n
Width192012012808010246476848375*23,438*WiPWiP
Height
108067.5Content AreaColumns24-
------102464--WiPWiP
Content Area











Column Width784.875523.25422.625311.93815*0,938*WiPWiP
Gutter261.62516180,580.5--WiPWiP
Content-Area Margin241,516180,580.560,375WiPWiP
Header Area











Header-Area241,5241,500483483483WiPWiP
Icon max241,5

Image Removed
Basic Components of the Dashboard

Image Removed
1920 Dashboard definition

241,500483483483WiPWiP
Icon min181,125181,125483483483WiPWiP
Scrollableyes
yes
yes
yes
yes
WiPWiP
Navi and Toolbar











Height----644644644WiPWiP

*Iphone 6 / WiP = Work in Progress



The dashboard breakpoints

All dashboards are divided into different breakpoints. The breakpoints define the visual division and distance of organisms, molecules and atoms from each other in all possible digital formats. This UI design kit considers the Web_Max breakpoint as default, all other breakpoints are located in the category subcategories.




Image Added



Web_Max
ID2 - Web Max Dashboard



Image Added
Web_Max/

Image Removed1920 Astronaut

Dashboard


Info
iconfalse
title
Zeplin
Documentation

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

1920 Tokyo at Night Dashboard

& Download


Astronaut
https://zpl.io/2ZNyJZE

Tokyo
https://zpl.io/2pGEvMQ

Adobe XD UI-Kit
coming soon






Web_Min
ID2 - Web Min Dashboard



Image Added
Web_Min/Dashboard






Tablet
ID2 - Tablet Dashboard



Image AddedTablet_Landscape/Dashboard

Image Added
Tablet_Portrait/Dashboard





Mobile
ID2 - Mobile Dashboard



Image Added
Mobile_Portrait/Dashboard






Kiosk
ID2 - Kiosk Dashboard



Image Added
Kiosk/Dashboard

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