Settings

variable

Neat grid

This variable is a sass map that overrides Neat's default grid settings. Use this to define your project's grid properties including gutters and total column count.

Properties
NameTypeDefaultDescription
columnsnumber (unitless)12

Default number of the total grid columns.

gutternumber (with unit)20px

Default grid gutter width between columns.

Example
SCSS
$neat-grid: (
  columns: 12,
  gutter: 20px,
);
variable

Custom grids

If you need multiple grids in a single project, you can do this by defining a new map stored within a variable of your choosing. This variable can then be passed directly in to any of Neat's mixins like grid-column(12, $my-custom-grid).

Custom grids are especially useful with grid-media. By defining a media attribute within your custom grid, you are able to easily define gutter width and total column count as well the breakpoint at which they should activate.

Properties
NameTypeDefaultDescription
columnsnumber (unitless)12

Number of the total grid columns.

gutternumber (with unit)20px

Grid gutter width between columns.

medianumber (with unit) | string | nullnull

The @media definition that is used by the grid-media mixin to determine the media properties.

colorcolornull

The color used by grid-visual to create the guides.

directionstringltr

The float direction used throughout the grid.

Example
SCSS
$my-custom-grid: (
  columns: 12,
  gutter: 20px,
  media: 1200px,
  color: rgba(#00d4ff, 0.25),
  direction: ltr,
);

$other-custom-grid-for-print: (
  columns: 14,
  gutter: 1.5rem,
  media: print,
);

Features

mixin

Grid collapse

Creates collapsed grid object that consumes the gutters of its container, for use in nested layouts.

Arguments
NameTypeDefaultDescription
gridmap$neat-grid

The grid to be used to generate the collapsed container. By default, the global $neat-grid will be used.

Example
SCSS
.element {
  @include grid-collapse;
}
CSS Output
.element {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}
mixin

Grid column

Creates a grid column of requested size.

Arguments
NameTypeDefaultDescription
columnsnumber (unitless)null

Specifies the number of columns an element should span based on the total columns of the grid.

This can also be defined in a shorthand syntax which also contains the total column count such as 3 of 5.

gridmap$neat-grid

The grid to be used to generate the column. By default, the global $neat-grid will be used.

Example
SCSS
.element {
  @include grid-column(3);
}
CSS Output
.element {
  width: calc(25% - 25px);
  float: left;
  margin-left: 20px;
}
mixin

Grid container

Creates a grid container with clearfix.

Example
SCSS
.element {
  @include grid-container;
}
CSS Output
.element::after {
  clear: both;
  content: "";
  display: block;
}
mixin

Grid media

grid-media allows you to change your layout based on a media query. For example, an object can span 3 columns on small screens and 6 columns on large screens.

You can take this a step further and set different grid attributes like gutter size and total column count for each media query. So, for example, you can have a 1rem gutter on small screens, and a 2rem gutter on large screens.

Arguments
NameTypeDefaultDescription
gridmap-

The grid or grids to be used within the scope of the block. These grids should include the media property to determine the expression for the media query.

Example
SCSS
$custom-neat-grid: (
  columns: 12,
  gutter: 50px,
  media: "screen and (max-width: 999px)",
);

$custom-neat-grid-2: (
  columns: 12,
  gutter: 70px,
  media: 1000px,
);

.element {
  @include grid-column(3);

  @include grid-media($custom-neat-grid, $custom-neat-grid-2){
    @include grid-column(6);
  }
}
CSS Output
.element {
  width: calc(25% - 25px);
  float: left;
  margin-left: 20px;
}

@media only screen and (max-width: 999px) {
  .element {
    width: calc(50% - 75px);
    float: left;
    margin-left: 50px;
  }
}

@media only screen and (min-width: 1000px) {
  .element {
    width: calc(50% - 75px);
    float: left;
    margin-left: 70px;
  }
}
mixin

Grid push

Push or pull a grid column by manipulating its left margin.

Arguments
NameTypeDefaultDescription
pushnumber (unitless)false

The number of columns to push the column.

gridmap$neat-grid

The grid to be used to determine how far to push the column. By default, the global $neat-grid will be used.

Example
SCSS
.element {
  @include grid-push(3);
}
CSS Output
.element {
  margin-left: calc(25% - 25px + 40px);
}
mixin

Grid shift

Shift columns and reorder them within their container using relative positioning.

Arguments
NameTypeDefaultDescription
shiftnumber (unitless)false

The number of columns to shift the column.

gridmap$neat-grid

The grid to be used to determine how far to shift the column. By default, the global $neat-grid will be used.

Example
SCSS
.element {
  @include grid-shift(3);
}
CSS Output
.element {
  left: calc(25% - 25px + 20px);
  position: relative;
}
mixin

Grid visual

Creates a series of guide lines using the background-image property on a grid container to visualise the columns and gutters of the grid.

Arguments
NameTypeDefaultDescription
colorcolor-

The color of the guide lines created.

gridmap$neat-grid

The grid used to determine the guides

Example
SCSS
.element {
  @include grid-visual;
}
CSS Output
.element {
  background-image: repeating-linear-gradient(  ) ;
}