Bourbon Neat Examples

View desktop source View mobile source

Basic

@include outer-container;
@include span-columns(6);
@include span-columns(6);

Multiple rows

@include outer-container;
(1)
@include span-columns(11);
@include omega();
@include span-columns(2);
@include span-columns(10);
@include omega();
@include span-columns(3);
@include span-columns(9);
@include omega();
@include span-columns(4);
@include span-columns(8);
@include omega();
@include span-columns(5);
@include span-columns(7);
@include omega();
@include span-columns(6);
@include span-columns(6);
@include omega();

Nesting columns

@include outer-container;
@include span-columns(4);
@include span-columns(8);
@include span-columns(4 of 8);

Table grid

@include outer-container;
@include span-columns(12);
@include row(table);
@include span-columns(8);
@include reset-display;
@include pad();

Shifting columns

@include outer-container;
@include span-columns(6);
@include shift(3);

Automatic rows

@include outer-container;
li.block {
  @include span-columns(3);
  @include omega(4n);
}
li.block
li.block
li.block
li.block
li.block
li.block
li.block
li.block
li.block
li.block
li.block

Media Queries

@include outer-container;
$mobile: new-breakpoint(max-width 500px 6);
@include span-columns(4);

@include media($mobile) {
  @include span-columns(3);
}
@include span-columns(8);

@include media($mobile) {
  @include span-columns(3);
}