Grid

Barebones includes a lightweight responsive grid for building common layouts. It uses CSS Grid with a familiar .container, .row and .col structure. The grid is designed to be fully customisable so it can be adjusted to the specifications of your project.

Grid configuration

Grid settings are defined in assets/styles/config/_variables.scss. Change these values before building if your project needs a different grid width, column count or gutter size.

$grid-max-width: 1200px;
$grid-columns: 12;
$grid-gutter: $base-spacing-unit;

Container

Use .container to constrain content, .row to group columns, and .col for each column. The container has a max-width defined by $grid-max-width and padding on either side of $base-spacing-unit. It can be used to keep content centralised and aligned to the margins of the website.

Example:
The following code creates two equal columns on larger screens and stacked full-width columns on smaller screens.

<div class="container">
    <div class="row">
        <div class="col col--lg-6 col--md-6 col--sm-12 col--xs-12">
            Column 1
        </div>
        <div class="col col--lg-6 col--md-6 col--sm-12 col--xs-12">
            Column 2
        </div>
    </div>
</div>

Rows

A .row creates a 12-track CSS grid and applies the configured column gap. To use a different number of columns in your layout, change $grid-columns. Columns should usually be direct children of .row. The gutter between columns is defined by $grid-gutter which by default is set to the $base-spacing-unit.

<div class="row">
    <div class="col col--lg-8 col--md-8 col--sm-12 col--xs-12">
        Main content
    </div>
    <div class="col col--lg-4 col--md-4 col--sm-12 col--xs-12">
        Sidebar
    </div>
</div>

Columns

Column width classes follow this pattern: col--{breakpoint}-{columns}.

Example:

The following code defines a layout as follows:

col--lg-4: 4 columns wide on large screens
col--md-6: 6 columns wide on medium screens
col--sm-12: full width on small screens
col--xs-12: full width on extra-small screens

<div class="col col--lg-4 col--md-6 col--sm-12 col--xs-12">
    Content
</div>

Column offsets

Column offsets are achieved through the use of start classes which take the following format: col--{breakpoint}-start-{line}. They place a column on an explicit grid line and serve to offset that column a set distance from the start of the row.

Example:
On desktop, the following layout would display an 8-track column that starts on the 3rd track, essentially giving it an offset of 2 tracks.

<div class="row">
    <div class="col col--lg-8 col--lg-start-3">
        Centred content
    </div>
</div>

Breakpoint prefixes

The grid uses four breakpoint prefixes: lg, md, sm and xs. These are generated from the theme breakpoint configuration in assets/styles/config/_variables.scss.

$breakpoint-lg: 1280px;
$breakpoint-md: 1024px;
$breakpoint-sm: 768px;
$breakpoint-xs: 480px;
$breakpoint-nav: 1000px;

Vertically centre content

Use .items-center on a row when columns need vertical alignment.

<div class="row items-center">
    ...
</div>

Alternate content display

Add .col--last to a column to place it after its siblings visually. This is useful for alternating image and content layouts.

Example:

<div class="row">
    <div class="col col--last col--lg-6 col--md-6 col--sm-12 col--xs-12">
        Image
    </div>
    <div class="col col--lg-6 col--md-6 col--sm-12 col--xs-12">
        Content
    </div>
</div>

Gutterless row

Use .row--gutterless to remove the gap between columns.

Example:

<div class="row row--gutterless">
    <div class="col col--lg-6 col--md-6 col--sm-12 col--xs-12">
        Column 1
    </div>
    <div class="col col--lg-6 col--md-6 col--sm-12 col--xs-12">
        Column 2
    </div>
</div>

This is useful when columns need to sit flush against each other.

Column starts

Start classes follow this pattern: col--{breakpoint}-start-{line}. They place a column on an explicit Grid line; the number is not relative to the preceding column.