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.