Layout examples

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

Layout with app bar region

This layout contains all the elements of the default layout, including the app bar region.

Layout with app bar region

<section class="appWrapper">
    <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>

    <section class="main appWrapper__main">
        <section class="main__navigation">
        </section>

        <section class="main__region">
        </section>
    </section>
</section>

<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
        }
    });
</script>

Layout without app bar region

This layout contains all the elements of the default layout, but without the app bar region.

Layout without app bar region

Open demo

<section class="appWrapper">
    <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>

    <section class="main appWrapper__main">
        <section class="main__navigation">
        </section>

        <section class="main__region">
        </section>
    </section>
</section>

<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
        }
    });
</script>

Usage

Element	Class	Description
`.main .main__navigation`	`.is-collapsed`	Collapses the navigation. If this class is not present, the navigation is visible.

Layout (Patterns)