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.
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 with sample content and functionality
This layout contains all regions as well as sample content and functionality.
Layout with sample content and functionality
<div class="appWrapper">
<div class="appWrapper__regions has-appBar has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">
<section class="leadingRegion">
<div class="listNavigation">
<div class="listNavigation__lists">
<div class="listNavigation__header">
Very simple List navigation
</div>
<ul class="listNavigation__list">
<li class="list__item">
<a href="#" class="item__link">
<div class="item__icon">
<span class="iconMdsp person" aria-hidden="true"></span>
</div>
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is a status set to indicate something important.</div>
</div>
<div class="item__metaInfo">
<span class="iconMdsp star has-color-accentTealDark" aria-hidden="true"></span>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__icon">
<span class="iconMdsp person" aria-hidden="true"></span>
</div>
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item and there is a status set to indicate something important.</div>
</div>
<div class="item__metaInfo">
<span class="iconMdsp exclamationDiamond black has-color-warning" aria-hidden="true"></span>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
<li class="list__item">
<a href="#" class="item__link">
<div class="item__content">
<h4 class="label">List item A</h4>
<div class="description">This is a list item. There is no icon or status indicator set.</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="mainRegion">
<div class="contentHeader">
<div class="contentHeader__header">
<h1 class="header__headline">Page Title</h1>
<div class="header__subline">Optional subline</div>
</div>
<div class="contentHeader__actions">
<button class="button--secondaryContentAction">
<span class="iconMdsp addCircle" aria-hidden="true"></span>
Add Button
</button>
<a class="button button--secondaryContentAction" href="#">
<span class="iconMdsp edit" aria-hidden="true"></span>
Edit Link
</a>
<a class="button button--secondaryContentAction" href="#">
<span class="iconMdsp delete" aria-hidden="true"></span>
Delete Link
</a>
</div>
</div>
<button class="button button--secondary" id="toggleLeadingRegionDemo">
Toggle visibility of leading region
</button>
<button class="button button--secondary" id="toggleContextRegionDemo">
Toggle visibility of context region
</button>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
</section>
<section class="contextRegion">
<button class="button button--secondary" id="toggleSlidingBehaviour">
Toggle sliding behaviour for demo
</button>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
<p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
</section>
<aside class="leadingRegionToggleArea">
<a href="#"></a>
</aside>
<aside class="contextRegionToggleArea">
<a href="#"></a>
</aside>
</div>
<ul class="appWrapper__appBar">
<li class="appBar__item">
<a href="#">
<span class="iconMdsp person" aria-hidden="true"></span>
<span class="item__title">Lorem</span>
</a>
</li>
<li class="appBar__item is-activated">
<a href="#">
<span class="iconMdsp calendarDay" aria-hidden="true"></span>
<span class="item__title">Ipsum</span>
</a>
</li>
<li class="appBar__item">
<a href="#">
<span class="iconMdsp aspects" aria-hidden="true"></span>
<span class="item__title">Dolor sit</span>
</a>
</li>
<li class="appBar__item">
<a href="#">
<span class="iconMdsp asset" aria-hidden="true"></span>
<span class="item__title">Amet tempor aliquam quctor</span>
</a>
</li>
<li class="appBar__item is-disabled">
<a href="#">
<span class="iconMdsp calendar" aria-hidden="true"></span>
<span class="item__title">Morbi et lobortis lacus sed tempor</span>
</a>
</li>
<li class="appBar__item">
<a href="#">
<span class="iconMdsp globalSettings" aria-hidden="true"></span>
<span class="item__title">Lobortis lacus sed tempor</span>
</a>
</li>
</ul>
<div class="appWrapper__mobileToggle">
<a href="#" class="leadingRegionToggle is-activated button button--secondary">
<span class="iconMdsp sidebar" aria-hidden="true"></span>
</a>
<a href="#" class="contextRegionToggle is-activated button button--secondary">
<span class="iconMdsp sidebar" aria-hidden="true"></span>
</a>
</div>
</div>
<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
_msb.init({
title: "App Layout",
showLegal: true,
polyfills: {
promise: true
}
});
window.onload = function(e){
var leading = document.querySelectorAll("a.leadingRegionToggle, .leadingRegionToggleArea > a");
var context = document.querySelectorAll("a.contextRegionToggle, .contextRegionToggleArea > a");
var regionsWrapper = document.querySelector(".appWrapper__regions");
for (var i=0; i < leading.length; i++) {
leading[i].addEventListener('click', function(e) {
regionsWrapper.classList.toggle('leadingRegion-is-expanded');
for (var j=0; j<leading.length; j++) {
leading[j].classList.toggle('is-activated');
}
});
}
for (var i=0; i < leading.length; i++) {
context[i].addEventListener('click', function(e) {
regionsWrapper.classList.toggle('contextRegion-is-expanded');
for (var j=0; j<context.length; j++) {
context[j].classList.toggle('is-activated');
}
});
}
var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
switchLayoutType.addEventListener('click', function() {
regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
});
var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
toggleLeading.addEventListener('click', function() {
regionsWrapper.classList.toggle('has-leadingRegion');
});
var toggleContext = document.querySelector("#toggleContextRegionDemo");
toggleContext.addEventListener('click', function() {
regionsWrapper.classList.toggle('has-contextRegion');
});
}
</script>
Empty layout with all regions
This layout contains all regions (including the App bar), without any content.
Empty layout with all regions
<div class="appWrapper">
<div class="appWrapper__regions has-appBar has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">
<section class="leadingRegion">
<!-- content for leading region goes here -->
</section>
<section class="mainRegion">
<!-- content for main region goes here -->
</section>
<section class="contextRegion">
<!-- content for context region goes here -->
</section>
<aside class="leadingRegionToggleArea">
<a href="#"></a>
</aside>
<aside class="contextRegionToggleArea">
<a href="#"></a>
</aside>
</div>
<ul class="appWrapper__appBar">
<li class="appBar__item">
<a href="#">
<span class="iconMdsp person" aria-hidden="true"></span>
<span class="item__title">Lorem</span>
</a>
</li>
<li class="appBar__item is-activated">
<a href="#">
<span class="iconMdsp calendarDay" aria-hidden="true"></span>
<span class="item__title">Ipsum</span>
</a>
</li>
<li class="appBar__item">
<a href="#">
<span class="iconMdsp aspects" aria-hidden="true"></span>
<span class="item__title">Dolor sit</span>
</a>
</li>
<li class="appBar__item">
<a href="#">
<span class="iconMdsp asset" aria-hidden="true"></span>
<span class="item__title">Amet tempor aliquam quctor</span>
</a>
</li>
<li class="appBar__item is-disabled">
<a href="#">
<span class="iconMdsp calendar" aria-hidden="true"></span>
<span class="item__title">Morbi et lobortis lacus sed tempor</span>
</a>
</li>
<li class="appBar__item">
<a href="#">
<span class="iconMdsp globalSettings" aria-hidden="true"></span>
<span class="item__title">Lobortis lacus sed tempor</span>
</a>
</li>
</ul>
<div class="appWrapper__mobileToggle">
<a href="#" class="leadingRegionToggle is-activated button button--secondary">
<span class="iconMdsp sidebar" aria-hidden="true"></span>
</a>
<a href="#" class="contextRegionToggle is-activated button button--secondary">
<span class="iconMdsp sidebar" aria-hidden="true"></span>
</a>
</div>
</div>
<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
_msb.init({
title: "App Layout",
showLegal: true,
polyfills: {
promise: true
}
});
window.onload = function(e){
var leading = document.querySelectorAll("a.leadingRegionToggle, .leadingRegionToggleArea > a");
var context = document.querySelectorAll("a.contextRegionToggle, .contextRegionToggleArea > a");
var regionsWrapper = document.querySelector(".appWrapper__regions");
for (var i=0; i < leading.length; i++) {
leading[i].addEventListener('click', function(e) {
regionsWrapper.classList.toggle('leadingRegion-is-expanded');
for (var j=0; j<leading.length; j++) {
leading[j].classList.toggle('is-activated');
}
});
}
for (var i=0; i < leading.length; i++) {
context[i].addEventListener('click', function(e) {
regionsWrapper.classList.toggle('contextRegion-is-expanded');
for (var j=0; j<context.length; j++) {
context[j].classList.toggle('is-activated');
}
});
}
var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
switchLayoutType.addEventListener('click', function() {
regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
});
var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
toggleLeading.addEventListener('click', function() {
regionsWrapper.classList.toggle('has-leadingRegion');
});
var toggleContext = document.querySelector("#toggleContextRegionDemo");
toggleContext.addEventListener('click', function() {
regionsWrapper.classList.toggle('has-contextRegion');
});
}
</script>
Empty layout without App bar
This layout contains all regions (without the App bar) without any content.
Empty layout without App bar
<div class="appWrapper">
<div class="appWrapper__regions has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">
<section class="leadingRegion">
<!-- content for leading region goes here -->
</section>
<section class="mainRegion">
<!-- content for main region goes here -->
</section>
<section class="contextRegion">
<!-- content for context region goes here -->
</section>
<aside class="leadingRegionToggleArea">
<a href="#"></a>
</aside>
<aside class="contextRegionToggleArea">
<a href="#"></a>
</aside>
</div>
<div class="appWrapper__mobileToggle">
<a href="#" class="leadingRegionToggle is-activated button button--secondary">
<span class="iconMdsp sidebar" aria-hidden="true"></span>
</a>
<a href="#" class="contextRegionToggle is-activated button button--secondary">
<span class="iconMdsp sidebar" aria-hidden="true"></span>
</a>
</div>
</div>
<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
_msb.init({
title: "App Layout",
showLegal: true,
polyfills: {
promise: true
}
});
window.onload = function(e){
var leading = document.querySelectorAll("a.leadingRegionToggle, .leadingRegionToggleArea > a");
var context = document.querySelectorAll("a.contextRegionToggle, .contextRegionToggleArea > a");
var regionsWrapper = document.querySelector(".appWrapper__regions");
for (var i=0; i < leading.length; i++) {
leading[i].addEventListener('click', function(e) {
regionsWrapper.classList.toggle('leadingRegion-is-expanded');
for (var j=0; j<leading.length; j++) {
leading[j].classList.toggle('is-activated');
}
});
}
for (var i=0; i < leading.length; i++) {
context[i].addEventListener('click', function(e) {
regionsWrapper.classList.toggle('contextRegion-is-expanded');
for (var j=0; j<context.length; j++) {
context[j].classList.toggle('is-activated');
}
});
}
var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
switchLayoutType.addEventListener('click', function() {
regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
});
var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
toggleLeading.addEventListener('click', function() {
regionsWrapper.classList.toggle('has-leadingRegion');
});
var toggleContext = document.querySelector("#toggleContextRegionDemo");
toggleContext.addEventListener('click', function() {
regionsWrapper.classList.toggle('has-contextRegion');
});
}
</script>Usage
| Element | Class | Description |
|---|---|---|
.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:
.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. |