Examples

Here are some of the different use cases that can be done using css pro layout

Basic usage

<div class="layout">

<header class="header">Header</header>

<main class="content">Content</main>

<footer class="footer">Footer</footer>

</div>

Example with sidebar

<div class="layout">

<header class="header">Header</header>

<div class="layout has-sidebar">

<aside class="sidebar">

Sidebar

</aside>

<main class="content">

Content

</main>

<div class="overlay"></div>

</div>

<footer class="footer">Footer</footer>

</div>

Full height sidebar

<div class="layout has-sidebar">

<aside class="sidebar">

Sidebar

</aside>

<div class="layout">

<header class="header">Header</header>

<main class="content">

Content

</main>

<div class="overlay"></div>

<footer class="footer">Footer</footer>

</div>

</div>

Stretched header

<div class="layout">

<header class="header">Header</header>

<div class="layout has-sidebar">

<aside class="sidebar">

Sidebar

</aside>

<div class="overlay"></div>

<div class="layout">

<main class="content">

Content

</main>

<footer class="footer">Footer</footer>

</div>

</div>

</div>

Stretched footer

<div class="layout">

<div class="layout has-sidebar">

<aside class="sidebar">Sidebar</aside>

<div class="layout">

<header class="header">Header</header>

<main class="content">Content</main>

</div>

<div class="overlay"></div>

</div>

<footer class="footer">Footer</footer>

</div>

Fixed header

<div class="layout fixed-header">

<header class="header">Header</header>

<div class="layout has-sidebar">

<aside class="sidebar">

Sidebar

</aside>

<div class="overlay"></div>

<main class="content">

Content

</main>

</div>

<footer class="footer">Footer</footer>

</div>

Fixed sidebar

<div class="layout has-sidebar fixed-sidebar">

<aside class="sidebar">

Sidebar

</aside>

<div class="layout">

<header class="header">Header</header>

<main class="content">

Content

</main>

<div class="overlay"></div>

<footer class="footer">Footer</footer>

</div>

</div>