When to use
The layout and app structure is the foundation for designing applications in MindSphere.
A layout consists of the following elements:
1. MindSphere OS Bar
- The MindSphere OS Bar is the most common UI component for all MindSphere apps. For further information see chapter MindSphere OS Bar.
2. Main region
- The main region contains the main content of the current page.
3. Navigation region
- The navigation region is mainly used for the app navigation.
4. App bar region
- The app bar region is used for the app bar.
- The app bar is the applications first level navigation for main sections within an application.
5. Context region
- The context region is used for tools and additional information content.
Uniform structure and spacing is an important factor to create a consistent experience.
There are the following layout types:
The fullscreen layout is often used 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.
Two column layout with navigation region
This layout is often used as a master detail layout.
Two column layout with context region
This layout is used if no navigation region is needed but additional information or tools.
Three column layout
This layout is used if a navigation region and additional information or tools are needed.
Do’s & Don’ts
- Ensure a simple navigation structure.
- Don’t use more than one app bar or navigation component.
This chapter shows several layout styles in the MindSphere Design System.
The following table gives reference to the different colors and shades used:
|Navigation region||all||Background color||Gray 100|
Sizing and spacing
The following measurements show the dimensions of the layout:
Basic layout elements
If the content in the navigation region is complex, more space could be needed.
Mobile for less than 768px
The standard horizontal spacing is an increment of 4px.
The minimum horizontal spacing for block-level elements is 8px.
The standard vertical spacing starts at 2px and increases by 4px and later by 8px: