Layout

A layout offers versatile ways of presenting and structuring content to create a balanced user experience.

Usage

When to use

The layout and app structure is the foundation for designing applications in MindSphere.

Types

There are the following layout types:

Fullscreen layout

Use the fullscreen layout to view and manage large sets of data, forms, charts or other types of visualization.

layout-usage-type-fullscreen
Fullscreen layout

Examples

layout-usage-typ-fullscreen-edit-mode
Edit-mode in fullscreen

Fullscreen detail page used for managing large sets of data and comparing values.

layout-usage-typ-fullscreen-large-datasets
Detail page in fullscreen

Use this layout for master detail layouts.

layout-usage-typ-2column-left
Sidebar left layout with leading region

Example

layout-usage-typ-two-col-left-master-detail
Master detail layout

Use this layout if additional information or components in a context region are needed.

layout-usage-typ-2column-right
Sidebar right layout with context region

Example

layout-usage-typ-two-col-right-workspace
Sidebar right layout with additional information

Two sidebars layout

Use this layout if a leading region and additional information or components in a context region are needed.

layout-usage-typ-3column
Two sidebars layout

Example

layout-usage-typ-three-col-extended-layout
Extended layout

General construction

A layout consists of the following elements:

layout-usage-general-construction
1. Global region, 2. Local region, 3. Leading region, 4. Main region, 5. Context region

1. Global region

  • Use the global region for the MindSphere OS Bar.

2. Local region

  • Use the local region for the app bar which is the first level navigation within an application.

3. Leading region

  • The leading region is mainly used for the content navigation and selection.

4. Main region

  • The main region contains the main content of the current page.

5. Context region

  • The context region is used for additional information and components.

The global and the main region are required in all parts of an application, all other regions are optional.

Behavior

Screen sizes (Breakpoints)

Breakpoints are the point at which your application will respond to different screen sizes to provide best user experience.

Screen sizes Breakpoints
xs max-width 599px
sm 600px - 959px
md 960px - 1279px
lg 1280px - 1919px
xl 1920px - infinite

Region behavior

Desktop and tablet (landscape) screens

layout-usage-behavior-region-desktop
Region behavior on desktop and tablet (landscape) screens

Mobile and tablet (portrait) screens

layout-usage-behavior-region-mobile
Region behavior on mobile and tablet (portrait) screens: 1. Main region visible, 2. Local region active, 3. Leading region active, 4. Context region active

Responsive behavior

Mobile size and tablet portrait size

To use the limited screen area of a mobile device, the vertical app bar changes into a horizontal version with a menu selection function and the sidebar toggle buttons. The sidebars overlay the content.

layout-usage-behavior-mobile
1. Default mobile view, 2. App bar drop-down (local region), 3. Sidebar left active (leading region), 4. Sidebar right active (context region)

Tablet landscape size

In the tablet view there are two behavior options for the sidebar (in leading region or context region): Content pushed and content overlaid. It depends on the use case which behavior makes sense.

layout-usage-behavior-tablet-1
Sidebar collapsed with toggle button in tablet screen

Content pushed

The sidebar can be persistent visible and the content of the main region resizes. With the region toggle button (1) you can slide in the sidebar or collapse it.

layout-usage-behavior-tablet-3
Sidebar with content pushed

Content overlaid

The sidebar can be temporary visible and slides over the content. The width and position of the content of the main region stay the same. With the region toggle button (1) you can slide in the sidebar. The sidebar disappears again optionally on click on a navigation item (2) or on click elsewhere outside the sidebar.

layout-usage-behavior-tablet-2
Sidebar with content overlaid

Desktop size

On desktops the sidebar is visible by default and can be toggled by clicking the toggle button. The content gets pushed by the sidebars.

layout-usage-behavior-desktop-1
Sidebar with toggle button in desktop screen

The clickable area of the toggle button extends in full sidebar height next to the sidebar. It gets highlighted on mouseover.

layout-usage-behavior-desktop-1-mouseover
Toggle button in desktop screen with mouseover

Do’s & Don’ts

ayout-usage-dos-useonce-1
ayout-usage-dos-useonce-2

  • Ensure a simple navigation structure.
  • Don’t use more than one app bar or navigation component.

layout-usage-do-sidebar-panel

  • Only one sidebar at a time can be active on mobile size.
  • Don’t activate two sidebars at a time.

Style

This chapter shows several layout styles in the MindSphere Design System.

Overview

layout-style-overview-fullscreen
Edit form example (Fullscreen layout)

layout-style-overview-master-detail
Master detail layout example (Sidebar left layout)

layout-style-overview-workspace
Additional information example (Sidebar right layout)

layout-style-overview-extended-layout
Extended layout example (Two sidebars layout)

layout-style-responsive-tablet-sidebar-toggle-1
Sidebars collapsed on tablet size

layout-style-responsive-tablet-sidebar-toggle-2
Leading region slides over the content on tablet size

Color

The following table gives reference to the different colors and shades used:

Region State Property Color name Modification
Leading/Context region all Background color Gray 100  
Leading/Context region all Border color Gray 400  
Leading/Context region all Shadow Black 0 0px 8px 0; rgba(0,0,0,0.3)
Region toggle button icon all Foreground color Gray 800  
Region toggle button all Background color White  
Region toggle button mouseover Background color Gray 100  
Region toggle button tablet all Border color Gray 400  
Region toggle button tablet all Shadow Black 0 1px 3px 0; rgba(0,0,0,0.08)

Sizing and spacing

The following measurements show the dimensions of the layout:

Basic layout elements

layout-style-sizing-basic
Sizing of local region and leading region

layout-style-sizing-basic-context-region
Sizing of context region

layout-style-spacing-fullscreen
Spacing for main region on desktop and tablet size

layout-style-spacing-master-detail
Spacing for main region in a master detail layout example

layout-style-spacing-mobile
Spacing for main region on mobile size (less than 768px)

Horizontal and vertical spacing

The standard horizontal spacing is an increment of 4px.

layout-style-spacings-horizontal
Horizontal spacing

The standard vertical spacing starts at 2px and increases by 4px and later by 8px.

layout-style-spacings-vertical
Vertical spacing

Region toggle button

layout-style-spacing-toggle-tablet
Sizing and spacing for region toggle button on tablet

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top