Skip to main content

Grid system

Overview

The BAS Style Kit inherits, and expands, the grid system provided by Bootstrap.

Available grids

Two grids are available, which can be mixed and nested if needed. Other than the number of columns in each grid they function in the same way. The extra columns in the alternate grid are primarily intended for use in applications, where more complex or detailed layouts and interfaces are required.

Use the standard grid if you are unsure which to use.

If you apply both standard and alternate grid classes to an element, the alternate grid classes will take affect as they are defined after the standard grid classes in the CSS file.

Grid Name Total Columns Class Prefix
Standard 12 .bsk-col-12
Alternate 24 .bsk-col-24

Grid components

There are three main components within the grid system:

  1. columns - which contain content
  2. rows - which contain and align columns
  3. containers - which contain rows and is a general purpose layout feature

There are some rules for using the grid system:

  1. all rows must be wrapped in a container, but this doesn’t need to be an direct parent
  2. only columns can be the direct children of rows
  3. each row can’t span more more than the total number of columns for each grid (i.e. either 12 or 24)

Grid sizes

There are five grid sizes for the five responsive breakpoints available in the Style Kit. Theses sizes are based on minimum widths, meaning they apply to that size, and all larger (wider) sizes, until the next minimum size is reached.

This means that a map and accompanying text can be shown side by side on medium sized devices and above, or, can be shown full width, stacked one after the other, on smaller devices.

Extra Small Small Medium Large Extra Large Full HD
Grid Behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints
Default Container Width None (auto) 750px 970px 1170px 1754px 1840px
Standard Grid Class Prefix .bsk-col-12-xs .bsk-col-12-sm .bsk-col-12-md .bsk-col-12-lg .bsk-col-12-xl .bsk-col-12-fhd
Alternate Grid Class Prefix .bsk-col-24-xs .bsk-col-24-sm .bsk-col-24-md .bsk-col-24-lg .bsk-col-24-xl .bsk-col-24-fhd
Column Width Auto ~62px ~81px ~97px ~146px ~153px
Gutter Width 30px (15px on each side of a column)
.bsk-col-12-md-6
.bsk-col-12-md-6
<div class="bsk-container"> <div class="bsk-row"> <div class="bsk-col-12-md-6">.bsk-col-12-md-6</div> <div class="bsk-col-12-md-6">.bsk-col-12-md-6</div> </div> </div>


.bsk-col-24-md-12
.bsk-col-24-md-12
<div class="bsk-container"> <div class="bsk-row"> <div class="bsk-col-24-md-12">.bsk-col-24-md-12</div> <div class="bsk-col-24-md-12">.bsk-col-24-md-12</div> </div> </div>

Offsetting columns

Offset classes can be used to ‘indent’ columns within a row.

For example .bsk-col-12-md-offset-4 offsets a column by 4 grid columns, or .bsk-col-24-md-offset-8 if using the BAS Style Kit grid.

.bsk-col-12-md-4
.bsk-col-12-md-4 .bsk-col-12-md-offset-4
.bsk-col-12-md-3 .bsk-col-12-md-offset-3
.bsk-col-12-md-3 .bsk-col-12-md-offset-3
.bsk-col-12-md-6 .bsk-col-12-md-offset-3
<div class="bsk-container"> <div class="bsk-row"> <div class="bsk-col-12-md-4">.bsk-col-12-md-4</div> <div class="bsk-col-12-md-4 bsk-col-12-md-offset-4">.bsk-col-12-md-4 .bsk-col-12-md-offset-4</div> </div> <div class="bsk-row"> <div class="bsk-col-12-md-3 bsk-col-12-md-offset-3">.bsk-col-12-md-3 .bsk-col-12-md-offset-3</div> <div class="bsk-col-12-md-3 bsk-col-12-md-offset-3">.bsk-col-12-md-3 .bsk-col-12-md-offset-3</div> </div> <div class="bsk-row"> <div class="bsk-col-12-md-6 bsk-col-12-md-offset-3">.bsk-col-12-md-6 .bsk-col-12-md-offset-3</div> </div> </div>

Nesting columns

Rows can be used within a column to create a nested grid. Each nested grid has the same total number of grid columns, but you don’t need to use all of them. You can also nest the alternate grid within the standard grid or vice versa.

For example, a row has two columns, A and B, spanning 6 columns each in the standard grid (12 columns). Column A has a row with three nested columns, each spanning 8 columns each of the alternate grid.

The nested columns in this example will appear to escape their parent column, this is an artefact of the site layout.

Level 1: .bsk-col-12-sm-6 (column A)
Level 2: .bsk-col-12-bsk-md-8 (1)
Level 2: .bsk-col-12-bsk-md-8 (2)
Level 2: .bsk-col-12-bsk-md-8 (3)
Level 1: .bsk-col-12-md-6 (column B)
<div class="bsk-container"> <div class="bsk-row"> <div class="bsk-col-12-md-6"> Level 1: .bsk-col-12-sm-6 (column A) <div class="bsk-row"> <div class="bsk-col-12-bsk-md-8"> Level 2: .bsk-col-12-bsk-md-8 (1) </div> <div class="bsk-col-12-bsk-md-8"> Level 2: .bsk-col-12-bsk-md-8 (2) </div> <div class="bsk-col-12-bsk-md-8"> Level 2: .bsk-col-12-bsk-md-8 (3) </div> </div> </div> <div class="bsk-col-12-md-6"> Level 1: .bsk-col-12-md-6 (column B) </div> </div> </div>

Ordering columns

Pull and push classes can be used to order columns within a row, though this is rarely needed.

.bsk-col-12-md-9 .bsk-col-12-md-push-3
.bsk-col-12-md-3 .bsk-col-12-md-pull-9
<div class="bsk-container"> <div class="bsk-row"> <div class="bsk-col-12-md-9 bsk-col-12-md-push-3 bsk-docs-content-block">.bsk-col-md-9 .bsk-col-md-push-3</div> <div class="bsk-col-12-md-3 bsk-col-12-md-pull-9 bsk-docs-content-block">.bsk-col-md-3 .bsk-col-md-pull-9</div> </div> </div>


.bsk-col-24-md-18 .bsk-col-24-md-push-6
.bsk-col-24-md-6 .bsk-col-24-md-pull-18
<div class="bsk-container"> <div class="bsk-row"> <div class="bsk-col-24-md-18 bsk-col-24-md-push-18 bsk-docs-content-block">.bsk-col-24-md-18 .bsk-col-24-md-push-18</div> <div class="bsk-col-24-md-6 bsk-col-24-md-pull-18 bsk-docs-content-block">.bsk-col-24-md-6 .bsk-col-24-md-pull-18</div> </div> </div>

Examples

See the grid examples for more grid system examples.