Versions Compared

Old Version 36

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

The 24 Colum-Grid


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.

All different breakpoints have a 24 column-grid.

Image Added
24 Column-grid of the Dashboard



The dashboard spacing

Image Removed
Basic Components of the Dashboard

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
Width192012012808010246476848375*23,438*WiPWiP
Height------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,5241,500483483483WiPWiP
Icon min181,125181,125483483483WiPWiP
Scrollableyes
yes
yes
yes
yes
WiPWiP
Navi and Toolbar











Height----644644644WiPWiP

*Iphone 6 / WiP = Work in Progress

Dashboard Breakpoints



The dashboard breakpoints

All dashboards are divided into different breakpoints. The breakpoints define the visual division and

spacing

distance of

dashboards and boardlets

organisms, molecules and atoms from each other in all possible digital formats. This UI design kit considers the Web_Max breakpoint as

the

default, all other breakpoints are located in the category subcategories.




Image Modified



Web_Max
ID2 - Web Max Dashboard




Web_Max/Dashboard


Info
iconfalse
titleDocumentation & Download


Astronaut
https://zpl.io/2ZNyJZE

Tokyo
https://zpl.io/2pGEvMQ

Adobe XD UI-Kit
coming soon






Web_Min
ID2 - Web Min Dashboard




Web_Min/Dashboard






Tablet
ID2 - Tablet Dashboard



Tablet_Landscape/Dashboard


Tablet_Portrait/Dashboard





Mobile
ID2 - Mobile Dashboard




Mobile_Portrait/Dashboard






Kiosk
ID2 - Kiosk Dashboard




Kiosk/Dashboard