Layout examples

The layout provides the basic structure of an app and is used in every page to get a consistent look & feel.

Different regions in Layout

There are different regions a layout can make use of. For example, you can have a layout without a leading or a context region.

JavaScript in example markup

The JavaScript code present in the example markup is used to show how to toggle regions, modes and features. Please make sure to implement your own solution to toggle regions, etc. depending on your tech stack.

To see a detailed explanation of all existing helper classes, please refer to the usage table below and inspect the samples in action with your developer tools.

Layout image 2

Layout with sample content and functionality

This layout contains all regions as well as sample content and functionality.

Layout with sample content and functionality

Layout image 2

Empty layout with all regions

This layout contains all regions (including the App bar), without any content.

Empty layout with all regions

Layout image 2

Empty layout without App bar

This layout contains all regions (without the App bar) without any content.

Empty layout without App bar

Usage

ElementClassDescription
.appWrapper__regions .has-appBar Moves the regions to the right so that there is enough space for an app bar on the left.
If this class is not present, the leading or main region starts at the very left of the browser window.
.appWrapper__regions .has-leadingRegion Sets the layout for a leading region on the left. If not set, the leading region will not be shown, even if it is present in the markup.
.appWrapper__regions .has-contextRegion Sets the layout for a context region on the right. If not set, the context region will not be shown, even if it is present in the markup.
.appWrapper__regions .leadingtRegion-is-expanded Changes the layout such that the leading region is visible and the other regions react accordingly. Use this class to show/toggle the leading region.
.appWrapper__regions .contextRegion-is-expanded Changes the layout such that the context region is visible and the other regions react accordingly. Use this class to show/toggle the context region.
.appWrapper__regions .appWrapper__regions--pushLayout Sets the layout algorithm such that for tablets in portrait mode (and above) leading region and context region 'share' the available space (= main region uses whats left of leading and context region).
Default behaviour without this class is that the leading and context region 'overlay' the main region.
.appWrapper__regions .has-distribution-width-xx Overrides the default width distribution between main region and context region. By default the context region has a width of 320px, by applying one of the following classes this can be set to the according percentage distribution. Please note: This override only works with tablets with a screen width of >= 768 pixels, below that it will fallback to default width. Possible values are:
  • 30, 33, 50, 60, 66
e.g. .has-distribution-width-33, .has-distribution-width-50, ...
.leadingRegion, .contextRegion .leadingRegion--hasSpacing, .contextRegion--hasSpacing Adds the same spacing (technically: margin) to the leading / context region as the main region.
Without these classes the regions default to a zero spacing.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top