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.
Examples
Fullscreen detail page used for managing large sets of data and comparing values.
Sidebar left layout
Use this layout for master detail layouts.
Example
Sidebar right layout
Use this layout if additional information or components in a context region are needed.
Example
Two sidebars layout
Use this layout if a leading region and additional information or components in a context region are needed.
Example
General construction
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.
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
Mobile and tablet (portrait) screens
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.
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.
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.
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.
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.
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.
Style
This chapter shows several layout styles in the design system.
Overview
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.