When to use
The layout and app structure is the foundation for designing applications in MindSphere.
There are the following layout types:
Use the fullscreen layout to view and manage large sets of data, forms, charts or other types of visualization.
Fullscreen detail page used for managing large sets of data and comparing values.
Sidebar left layout
Use this layout for master detail layouts.
Sidebar right layout
Use this layout if additional information or components in a context region are needed.
Two sidebars layout
Use this layout if a leading region and additional information or components in a context region are needed.
A layout consists of the following elements:
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.
Screen sizes (Breakpoints)
Breakpoints are the point at which your application will respond to different screen sizes to provide best user experience.
|sm||600px - 959px|
|md||960px - 1279px|
|lg||1280px - 1919px|
|xl||1920px - infinite|
Desktop and tablet (landscape) screens
Mobile and tablet (portrait) screens
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.
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.
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.
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.
On desktops the sidebar is visible by default and can be toggled by clicking the toggle button. The content gets pushed by the sidebars.
The clickable area of the toggle button extends in full sidebar height next to the sidebar. It gets highlighted on mouseover.
Do’s & Don’ts
- Ensure a simple navigation structure.
- Don’t use more than one app bar or navigation component.
- Only one sidebar at a time can be active on mobile size.
- Don’t activate two sidebars at a time.
This chapter shows several layout styles in the MindSphere Design System.
The following table gives reference to the different colors and shades used:
|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
Horizontal and vertical spacing
The standard horizontal spacing is an increment of 4px.
The standard vertical spacing starts at 2px and increases by 4px and later by 8px.