⛩
Here’s a few examples of Neat in action!

Using the default Neat grid

The .default-neat-grid pattern includes the grid-container mixin as the wrapper. .default-neat-grid__a-single-column then includes grid-column and only specifies a column count of one for the default grid that comes with Neat, which has 12 columns and 20px wide gutters.

SCSS

@import "neat";

.default-neat-grid {
  @include grid-container;
}

.default-neat-grid__a-single-column {
  @include grid-column(1);
}

SLIM

.default-neat-grid
  - 12.times do
    .default-neat-grid__a-single-column

Make a custom Neat grid

Instead of using Neat's default grid, make a custom one. Store it as a map variable, and provide it when calling the Neat's mixins. Here is a grid with three columns and 60px gutters.

SCSS

@import "neat";

$custom-grid--thirds: (
  columns: 3,
  gutter: 60px,
);

.custom-grid--thirds {
  @include grid-container;
}

.custom-grid--thirds__a-single-column {
  @include grid-column(1, $custom-grid--thirds);
}

SLIM

.custom-grid--thirds
  .custom-grid--thirds__a-single-column
  .custom-grid--thirds__a-single-column
  .custom-grid--thirds__a-single-column

Nest one grid inside another

Make two custom grids and nest one inside the other. The nested grid calls grid-collapse to fit it nicely inside its parent.

SCSS

@import "neat";

$sidebar-layout: (
  columns: 3,
  gutter: 40px,
);

$product-gallery: (
  columns: 4,
  gutter: 40px,
);

.sidebar-layout {
  @include grid-container;
}

.sidebar-layout__sidebar {
  @include grid-column(1, $sidebar-layout);
}

.sidebar-layout__main {
  @include grid-column(2, $sidebar-layout);
}

.product-gallery {
  @include grid-collapse($product-gallery);
  @include grid-container;
}

.product-gallery__item {
  @include grid-column(1, $product-gallery);
  margin-bottom: 1rem;
}

SLIM

.sidebar-layout
  .sidebar-layout__sidebar
  .sidebar-layout__main
    .product-gallery
      - 12.times do
        .product-gallery__item

A responsive grid

Call grid-media as a handy responsive shortcut. All @includes of Neat mixins within the block will now have the context of the provided grid.

SCSS

@import "neat";

$article-layout-grid: (
  columns: 1,
  gutter: 2rem,
);

$article-layout-grid--tablet-up: (
  columns: 5,
  gutter: 2rem,
  media: "(min-width: 768px)",
);

.article-layout {
  @include grid-container;
}

.article-layout__hero {
  @include grid-column(1, $article-layout-grid);
  margin-bottom: 2rem;
}

.article-layout__sidebar {
  @include grid-column(1, $article-layout-grid);
  margin-bottom: 2rem;

  @include grid-media($article-layout-grid--tablet-up) {
    @include grid-column(2);
  }
}

.article-layout__main {
  @include grid-column(1, $article-layout-grid);

  @include grid-media($article-layout-grid--tablet-up) {
    @include grid-column(3);
  }
}

SLIM

.article-layout
  .article-layout__hero
    / ...content...
  .article-layout__sidebar
    / ...content...
  .article-layout__main
    / ...content...

1 of 1 columns

1 of 1 columns below 786px
2 of 5 columns above

1 of 1 columns below 786px
3 of 5 columns above