grail css layouts

The single layout

The single is what it sounds like: a single column layout. It starts off single column and never changes as screens widen. After all your basic classes and elements are made, all you need to do is place the layout-single class on your html element. You can find the basics in the overview.

Note that by default all single containers are full width. This page uses a class to constrain the reading width of inner elements. Try document.querySelectorAll('.reading-width') to see them.

When should I use the single layout?

Sometimes you need a wide layout to place full bleed content inside. You have a hero that needs to be full width? Bingo! Have a large image meant to span left to right? Great. Just want a single column of text in the middle of the screen. Sure.

The caveat here is that your inner elements are responsible for their own spacing. Want a hero? Well, you're on your own for that. Want a single column of text? Fine, But you have to place an inner container (preferably inside main) with a max-width (just like this page does).

Just give me the markup!

Okay, here it is.

<html class="html layout-single">
  <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>