Using the Flank Mixin

A common layout is to have a content area with a flanking sidebar. Guess what this mixin does.

It is common to have a wide content areas flanked by a sidebar. This is what this mixin is for.

Default Flank Example

This is an example of the flank used with default variables set in the config. Assuming the following HTML:

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

And the following SASS:

.your-class {
    @include flank;

This achieves this layout:

This is a wide content area.


This uses the default variables set out in _config-layout.scss. To affect all useage of the flank mixin, adjust these. If you want to do two or more unique layouts using flank, continue reading.

Custom Flank

The mixin has a number of options. For instance, you can switch the flank from the default right side to the left side, and the set the class names of the elements to use as the main area and the flank, along with overiding the point at which the elements will stack.

This example is resetting all options. You don't have to do them all, just set the ones you wish to adjust. Adjust the size of the browser window to see things stack:

.your-element {
    @include flank (
        $flankdir: "left",
        $flank-flank-elm: "flank",
        $flank-main-elm: "main",
        $flank-main-c: 7,
        $flank-flank-c: 5

This switches the flank to the left side and ajusts the columns width.


This is a wide content area.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.