Grid

Neat is a semantic grid framework dependent on the Bourbon mixin library, that we are using at this time. We are moving away from using presentational class names on elements in the HTML layer, in favor of using mixins in the CSS/SASS layer, in order to better de-couple the markup from its styling. This is represented in the below examples; the code blocks within the elements reflect what is implemented via the CSS. We are also experimenting with extensions from Neat for other possible needs, such as rows of equal height columns.

// neat grid settings
$column: 67px;
$gutter: 36px;
$grid-columns: 12;
$max-width: 1200px;

// extra-small is default
$small-breakpoint: 480px;
$medium-breakpoint: 768px;
$large-breakpoint: 992px;
$extra-large-breakpoint: 1200px;
  

Note: All containing elements need to @extend %container

2 column layout for medium and above

@include from-medium {
  @include span-columns(6);
}
    

@include from-medium {
  @include span-columns(6);
}
      

2 column layout for medium, 4 column layout for large and above

@include at-medium {
  @include span-columns(6);
  @include omega(even);
}

@include from-large {
  @include span-columns(3);
}
      

@include at-medium {
  @include span-columns(6);
  @include omega(even);
}

@include from-large {
  @include span-columns(3);
}
      

@include at-medium {
  @include span-columns(6);
  @include omega(even);
}

@include from-large {
  @include span-columns(3);
}
      

@include at-medium {
  @include span-columns(6);
  @include omega(even);
}

@include from-large {
  @include span-columns(3);
}
      

4 column layout for medium and above, with equal height columns

@include from-medium {
  @include container-equal;
  & > * {
    margin-top: 0;
    @include span-columns(3);
  }
}