Using the Holygrail Mixin

The fabled holygrail layout. Legendary for being hard to achieve. Not anymore!

The Holy Grail mixin allows you to do what used to be pretty tough - a three column layout. Not any more! It's similar to the flank mixin. To use it, just include the mixin in your SASS file:

.holygrail {
    @include holygrail;
}

Of course, you will need some html for it. The example below will work with the default config variables:

<div class="holygrail-example">
<div class="left">
    <p>Left</p>
</div>
<div class="middle">
    <p>Middle</p>
</div>
<div class="right">
    <p>Right</p>
</div>
</div>

This will yeild the following triple column layout:

Left

Middle

Right

The following variables in the _layout.scss config file control the global settings for the holygrail:

$holygrail-left-element: "left";
$holygrail-middle-element: "middle";
$holygrail-right-element: "right";
$holygrail-left-column: 3;
$holygrail-middle-column: 5;
$holygrail-right-column: 4;
$holygrail-breakpoint: $bp-medium;

Customising

Like the other layout mixins, you can of course override all of the settings on the fly:

.holygrail-example-custom {
  @include holygrail('holygrail-left', 'holygrail-middle', 'holygrail-right', 768px, 2, 3, 7, $gutter-width, $container-margin, $center-containers, 960px, $holygrail-column-bottom-spacing);
}
Option Description
"holygrail-left" The desired class name for the left element
"holygrail-middle" The desired class name for the middle element
"holygrail-right" The desired class name for the right element
768px The point at which all three columns will stack. Accepts a px value or variable such as $bp-medium
2 The width of the left side
3 The width of the middle
7 The width of the right side
true Center the holygrail on the page or within its parent.
960px The maximum width the holygrail will grow to in a fluid layout.

The settings above allow you to change the way the holygrail looks by modifying the column widths, the class names used and the point at which it stacks on small screens.

Left

Middle

Right

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.