Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

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
Bootstrap 12 column 12 .bsk-col-*
Standard - depreciated 12 .bsk-col-12
Alternate - depreciated 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

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-xs .bsk-col-sm .bsk-col-md .bsk-col-lg .bsk-col-xl .bsk-col-fhd
Alternate Grid Class Prefix .bsk-col-xs .bsk-col-sm .bsk-col-md .bsk-col-lg .bsk-col-xl .bsk-col-fhd
Column Width Auto ~62px ~81px ~97px ~146px ~153px
Gutter Width 30px (15px on each side of a column)
.bsk-col-md-6
.bsk-col-md-6
<div class="bsk-row">
  <div class="bsk-col-md-6 bsk-docs-content-block">.bsk-col-md-6</div>
  <div class="bsk-col-md-6 bsk-docs-content-block">.bsk-col-md-6</div>
</div>
.bsk-col-md-12
<div class="bsk-row">
  <div class="bsk-col-md-12 bsk-docs-content-block">.bsk-col-md-12</div>
</div>

Offsetting columns

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

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

.bsk-col-md-4
.bsk-col-md-4 .bsk-offset-md-4
.bsk-col-md-3 .bsk-offset-md-3
.bsk-col-md-3 .bsk-offset-md-3
.bsk-col-md-6 .bsk-offset-md-3
<div class="bsk-row">
  <div class="bsk-col-md-4 bsk-docs-content-block">.bsk-col-md-4</div>
  <div class="bsk-col-md-4 bsk-offset-md-4 bsk-docs-content-block">.bsk-col-md-4 .bsk-offset-md-4</div>
</div>
<div class="bsk-row">
  <div class="bsk-col-md-3 bsk-offset-md-3 bsk-docs-content-block">.bsk-col-md-3 .bsk-offset-md-3</div>
  <div class="bsk-col-md-3 bsk-offset-md-3 bsk-docs-content-block">.bsk-col-md-3 .bsk-offset-md-3</div>
</div>
<div class="bsk-row">
  <div class="bsk-col-md-6 bsk-offset-md-3 bsk-docs-content-block">.bsk-col-md-6 .bsk-offset-md-3</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-sm-6 (column A)
Level 2: .bsk-col-bsk-md-8 (1)
Level 2: .bsk-col-bsk-md-8 (2)
Level 2: .bsk-col-bsk-md-8 (3)
Level 1: .bsk-col-md-6 (column B) 
<div class="bsk-row">
  <div class="bsk-col-md-6 bsk-docs-content-block">
    Level 1: .bsk-col-sm-6 (column A)
    <div class="bsk-row">
      <div class="bsk-col-bsk-md-8 bsk-docs-content-block">
        Level 2: .bsk-col-bsk-md-8 (1)
      </div>
      <div class="bsk-col-bsk-md-8 bsk-docs-content-block">
        Level 2: .bsk-col-bsk-md-8 (2)
      </div>
      <div class="bsk-col-bsk-md-8 bsk-docs-content-block">
        Level 2: .bsk-col-bsk-md-8 (3)
      </div>
    </div>
  </div>
  <div class="bsk-col-md-6 bsk-docs-content-block">
    Level 1: .bsk-col-md-6 (column B)
  </div>
</div>

Ordering columns

Order classes can be used to order columns within a row.

1 .bsk-col-md-4 .bsk-order-2
2 .bsk-col-md-4 .bsk-order-1
3 .bsk-col-md-4 .bsk-order-3
<div class="bsk-row">
  <div class="bsk-col-md-4 bsk-order-2 bsk-docs-content-block">1 .bsk-col-md-4 .bsk-order-2</div>
  <div class="bsk-col-md-4 bsk-order-1 bsk-docs-content-block">2 .bsk-col-md-4 .bsk-order-1</div>
  <div class="bsk-col-md-4 bsk-order-3 bsk-docs-content-block">3 .bsk-col-md-4 .bsk-order-3</div>
</div>

Examples

See the grid examples for more grid system examples.