Our standard layout consists of a navigation, main area and footer. The navigation and footer stay the same across the different pages, but the main area markup differs depending on the purpose of the page.

The main area is always contained in the main tag and is part of a rails layout:

  
  <main class="page" role="main">
    // content
  </main>
  

The .page class sets the white background for the page. The role attribute is for older browsers, not supporting the main tag.

The simplest layout

  
  <main class="page" role="main">
    <header class="page-header">
      // full width headers, like the `.page-header-with-bg` component
      // would be outside the article tag so they can stretch edge to edge,
      // although a simple `.page-header` will work here fine as well
    </header>
    <article class="content -padded">
      // the -padded modifer adds padding to each side of the container, making
      // this a great basic layout
    </article>
  </main>
  

The 2/3 sidebar layout

The most common layout will be the 2/3 sidebar layout. This layout extends the inuit.css grid, widths and our classes to create cleaner markup, as well making it responsive. It's also an example of how a reusable layout should be built. The grid and responsive settings should be abstracted into a single class, making it easier to modify and reason. A typical setup would look like this:

  
  <main class="page" role="main">
    <article class="content-standard">
      <div class="content-standard__header">
        <header class="page-header">
          // this header could still be full-width - by default this layout expectes the
          // contained element manage it's padding on it's own
        </header>
      </div>
      <div class="content-standard__main">
        // here would be content of the page
      </div>
      <div class="content-standard__sidebar">
        // the sidebar
      </div>
      <footer class="content-standard__footer">
        // the content footer (not page footer)
      </footer>
    </article>
  </main>
  

An example custom layout

The blog extends the the content class to create a custom layout with special sections common only to the blog.

  
  <main class="page" role="main">
    <article class="content-blog">
      <div class="content-blog__main">
        <header class="page-header -inline">
          // the -inline modifier will reset top and bottom padding and margin
        </header>
        <div class="content-blog__meta"></div>
        <div class="content-blog__body">
          // special blockquote and image styles here
        </div>
        <div class="content-blog__meta"></div>
        <div class="comments">
          // note that comments, being a component in themselves are not
          // a child of content-blog
        </div>
      </div>
      <div class="content-blog__sidebar"></div>
    </article>
  </main>
  

Creating layouts

The best approach is to use a combination of the "content -padded" classes and inuit.css grid system. This will create correct padding across breakpoints for the container and give you a lot flexibility in creating the intended layout.

If custom margin/paddings etc are needed, you should create a custom layout that @extend's %content and the grids (see content-blog for example). The name should be prefixed by content- and following the naming pattern from other layouts (main, sidebar, body etc).

Complex layout elements, like comments on the blog should be extracted as separate components and not be part of layout - these should focus on layout specific rules like margin, padding, widths and borders (within reason of course!).

  
  <main class="page" role="main">
    <header class="page-header-with-bg"></header>
    <article class="content -padded">
      <div class="grid">
        // We need the container because the .grid class uses negative
        // margins to right align the columns
        <div class="grid__item two-thirds"></div>
        <div class="grid__item two-thirds"></div>
        <div class="grid__item two-thirds"></div>
        // note that inuit.css does not have the idea of rows
        // when items reach 100% in width they will just stack
        // as they inline-block elements
        <div class="grid__item one-half"></div>
        <div class="grid__item one-half"></div>
      </div>
    </article>
  </main>