Page layout, intro

There are a few key page layout elements available:

  • Main that wraps the main section of the page,
  • Margins that add margins around content and
  • Sidebar with content divided into boxes with Sidebar-box,
  • Footer is the last visible element of the page (see the footer of Atomia Pattern Library itself).

Notice that the Atomia Pattern Library itself is also an example of the layout with the sidebar below.

You will also notice in the examples that using these classes for other layout than page wide layout works fine, although for more general purpose layout Grid might be more suitable.

(In the examples below we have added borders for clarity).

Example

Main

Sidebar

Sidebar-box

Sidebar-box

Margins

Adapted for sidebar with Margins--sidebar

Main

Margins

Markup

<section class="Main" style="border: 1px solid #000">
    <h1>Main</h1>

    <div class="Sidebar" style="border: 1px solid #000;">
        <h2>Sidebar</h2>
        <div class="Sidebar-box">
            <p>Sidebar-box</p>
        </div>

        <div class="Sidebar-box">
            <p>Sidebar-box</p>
        </div>
    </div>

    <div class="Margins Margins--sidebar" style="border: 1px solid #000;min-height: 300px;">
        <h2>Margins</h2>
        <p>Adapted for sidebar with <code>Margins--sidebar</code></p>
    </div>
</section>

<hr />

<section class="Main" style="border: 1px solid #000">
    <h1>Main</h1>
    <div class="Margins" style="border: 1px solid #000;min-height: 300px;">
        <h2>Margins</h2>
    </div>
</section>