Menu

1.8Grid System

Concise uses the atGrid grid system built by Concise contributor James Kolce. This system relies primarily on HTML attributes for building out rows and columns. However, mixins are also included for writing semantic markup

Please refer to our documentation on mixins to see arguments and outputs for each mixin.

By default, the grid system has a container width of 1200px, 12 columns, and 30px gutters.

You can find all of the configuration for the Concise grid inside of /custom/_globals.scss.

Containers

You can wrap content in the container attribute to set a max width of 1200px and center content. Alternatively, you can use the container() mixin to create semantic containers.

Rows

You can create a row that holds your columns either by using the row attribute, or by using the included row() mixin.

Columns

Columns are nested inside of rows, and can be created either by using the column attribute or by using the column() mixin.

When using the column() mixin, you must supply an argument for the size of the column, this being a fraction of a number from 0 to 1 (e.g. 1/6).

By default, all columns collapse into 100% width at 48em.

Deleting Gutters

By default, grid columns have 30px gutters. You can change this amount in your custom configuration in custom/_globals.scss. You can also choose whether or not to use gutters in the second argument of the column() mixin.

Nesting

You also can nest grids inside of each other by nesting a row attribute inside of a column.

Offset

You can add an offset to a column by adding +1 through +11 in the column attribute. This will shift the column so you can have more control over the layout.