grail css layouts

The twin layout

The twin layout is intended for displaying side by side content. On narrow widths, it is identical to other layouts, but as the screen sides, it takes main and aside, then makes them equal width.

When should I use the single layout?

Use the twin layout only when you have something important to show in conjuction with your most important content. Want to show a code editor window next to your content? Want display sticky tooltips next to your article. This layout might but the place to start.

Keep in mind that this type of thing may also be better achieved with single. It really depends.

Additionally, you may want to manually hide or provide a flyout menu for nav on narrow widths.

Just give me the markup!

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