Page container

About

This is where all the elements of the layout lives. #page-container sets a flexbox and basic sizing.

Add classes to #page-container to customize your layout.

For details on the sidebar properties, please see the sidebar section below.

Class name	Description
.sidebar-o	Creates an offset for the sidebar. This class must be added for the sidebar to work properly. If you are building a page without sidebar, don't add this one.
.sidebar-dark	Dark themed sidebar.
.page-header-dark	Dark themed header.
.page-header-fixed	This class makes the #page-header fixed on the top of the viewport.

Example

<div id="page-container" class="sidebar-o sidebar-dark page-header-fixed">

    <nav id="sidebar">
        ...
    </nav>

    <header id="page-header">
        ...
    </header>

    <main id="main-container">
        ...
    </main>

    <footer id="page-footer">
        ...
    </footer>

</div>