variableThis 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.
| Name | Type | Default | Description |
|---|---|---|---|
columns | number (unitless) | 12 | Default number of the total grid columns. |
gutter | number (with unit) | 20px | Default grid gutter width between columns. |
$neat-grid: (
columns: 12,
gutter: 20px,
);variableIf 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.
| Name | Type | Default | Description |
|---|---|---|---|
columns | number (unitless) | 12 | Number of the total grid columns. |
gutter | number (with unit) | 20px | Grid gutter width between columns. |
media | number (with unit) | string | null | null | The |
color | color | null | The color used by |
direction | string | ltr | The float direction used throughout the grid. |
$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,
);mixinCreates collapsed grid object that consumes the gutters of its container, for use in nested layouts.
| Name | Type | Default | Description |
|---|---|---|---|
grid | map | $neat-grid | The grid to be used to generate the collapsed container. By default, the global |
.element {
@include grid-collapse;
}.element {
margin-left: -20px;
margin-right: -20px;
width: calc(100% + 40px);
}| Name | Type | Default | Description |
|---|---|---|---|
columns | number (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 |
grid | map | $neat-grid | The grid to be used to generate the column. By default, the global |
.element {
@include grid-column(3);
}.element {
width: calc(25% - 25px);
float: left;
margin-left: 20px;
}.element {
@include grid-container;
}.element::after {
clear: both;
content: "";
display: block;
}mixingrid-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.
| Name | Type | Default | Description |
|---|---|---|---|
grid | map | - | The grid or grids to be used within the scope of the block. These grids should include the |
$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);
}
}.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;
}
}| Name | Type | Default | Description |
|---|---|---|---|
push | number (unitless) | false | The number of columns to push the column. |
grid | map | $neat-grid | The grid to be used to determine how far to push the column. By default, the global |
.element {
@include grid-push(3);
}.element {
margin-left: calc(25% - 25px + 40px);
}mixinShift columns and reorder them within their container using relative positioning.
| Name | Type | Default | Description |
|---|---|---|---|
shift | number (unitless) | false | The number of columns to shift the column. |
grid | map | $neat-grid | The grid to be used to determine how far to shift the column. By default, the global |
.element {
@include grid-shift(3);
}.element {
left: calc(25% - 25px + 20px);
position: relative;
}mixinCreates a series of guide lines using the background-image property on a grid container to visualise the columns and gutters of the grid.
| Name | Type | Default | Description |
|---|---|---|---|
color | color | - | The color of the guide lines created. |
grid | map | $neat-grid | The grid used to determine the guides |
.element {
@include grid-visual;
}.element {
background-image: repeating-linear-gradient( … ) ;
}