The
Basic Brockmann

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);  
}

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

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

Omega

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.

Push

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.