Jay Freestone / @jayfreestone

Basic Brockmann

for web designers

A set of basic grid mixins written in SASS, for use with Libsass, owing to Steve Hickey.


You can download Brockmann, clone the repo or install it using Bower.

bower install the-basic-brockmann


Include _grid.scss & _mixins.scss in your project, then declare these variables in a preceeding file:

$max-width: 1360px;  
$column-width: 6.38298%;  
$gutter-width: 2.12766%;  
$maximum-columns: 12;


Define the main container with the %container placeholder:

.container {  
  @extend %container;  

Then define the widths of elements with the col mixin:

main {  
  @include col(8);  

By default col will assume the parent element contains the maxium number of columns specificed in $maximum-columns — in this example 12. If you are nesting elements and wish to instead declare how many columns the parent has you may pass in a second number:

aside {  
  @include col(2, 6);  

This translates to: ‘span two of six columns’.


The final column in a row must be declared by passing in the omega flag, or optionally using the omega mixin:

aside {  
  @include col(2, 6, omega);  

// Or:

aside {  
  @include col(2, 6);  
  @include omega;  

The first is prefferable as it avoids outputting CSS that will be rewritten.

Currently when passing in the omega flag the parent needs to be declared, ensuring omega is the last option passed into the mixin. This would, for instance, not be valid: @include col(2, omega).

The omega syntax can also take a third option: none. This outputs the width and margins without the floats (there is 'no' float). This is useful when collapsable margins are desirable, for instance when styling elements within an article body.


You can break the flow with the push mixin.

@include push(left, 1);

The example above will ‘push’ the element one column from the left to the right, essentially adding a left margin equivalent to one column and gutter.


How do I work out the % values?

You’re currently on your own here. At the moment Brockmann doesn’t handle the original grid calculations. There are, however, a bunch of grid calculators out there, including Gridset.


Not yet, although this is something I’m interested in exploring.

Why should I use Brockmann?

Because you’re using Libsass, which (at the time of writing) rules out the two well established SASS based grid systems, Susy and Neat. Brockmann is designed to be super lightweight and incredibly easy to understand. It’s not a comprehensive system. It’s a set of transparent and reusable mixins that let you built out a pre-conceived grid quickly.