Using Flank Mixin

Easily make a content area with a flanking side bar with just one line of code.

The default settings in SASS config will make a content area 8 columns wide with a 4 column flank alongside it. Given the suggested html below, this will yield the following result:

.example-flank {
  @include flank;
}

<div class="grid-flank">
<div class="main">
  <p>This is a wide content area.</p>
</div>
<div class="flank">
  <p>Sidebar</p>
</div>
</div>

Custom Flank

The mixin allows for making custom flanks directly by passing some options through to it. You can set the side that the flank appears on, the classes used for the flank and wider area, as well as the column widths to use:

.grid-flank-custom {
  @include flank (
      "right",
      "menu",
      "content-area",
      3,
      9
  );
}