Slate uses a 12 column flexbox grid in a series of containers, rows, and columns. Below is an example and an in-depth look at how the layout comes together.
A standard .col will provide an automatic width inside a row.
Breakpoints exist for @xs, @s, @m, @xl and @xxl. Below is a table describing the device sizes and breakpoints.
Devices can be targeted by appending @device to any of the columns.
| .col@xs | .col@s | .col@m | .col@l | .col@xl | .col@xxl | |
|---|---|---|---|---|---|---|
| Breakpoint | 576px | ≥576px | ≥768px | ≥992px | ≥1200px | ≥1800px |
| Container | None | 540px | 720px | 960px | 1140px | 1640px |
| Gutter | var(--space) | |||||
Combine with flex utility classes to change the layout type to column.
All alignment & spacing can target devices by appending the appropriate @device.
Helper classes exist to make align easy. Each alignment class also exists at each device breakpoint, so you can use .row--top or .row-xs-center in combination.
By default a column will fill the height of the row. To control the alignment within the row you can use .top, .middle or .bottom.
By default a column will fill the height of the row. To control the alignment within the row you can use .top, .middle or .bottom.
Reverse will adjust flex-direction from either row-reverse with .row--reverse or column reverse with .col--reverse.