grail css layouts

The standard layout

The standard is the holy grail layout. After all your basic classes and elements are made, all you need to do is place the layout-standard class on your html element. You can find the basics in the overview.

When should I use the standard layout?

Scaling from one column on narrow screens, then two columns on tablet and small laptops, to three columns on the widest screens, the standard provides the flexibly for nearly any use case.

With the exception of the body, all elements are optional (though its best not to omit main`).

Just give me the markup!

Okay, here it is.

<html class="html layout-standard">
<body class="body">
    <header class="header"></header>
    <nav class="nav"></nav>
    <main class="main"></main>
    <aside class="aside"></aside>
    <footer class="footer"></footer>
</body>
</html>