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 |
| 24 | .bsk-col-24 |
Grid components
There are three main components within the grid system:
- columns - which contain content
- rows - which contain and align columns
- containers - which contain rows and is a general purpose layout feature
There are some rules for using the grid system:
- all rows must be wrapped in a container, but this doesn’t need to be an direct parent
- only columns can be the direct children of rows
- 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 |
| Column Width | Auto | ~62px | ~81px | ~97px | ~146px | ~153px |
| Gutter Width | 30px (15px on each side of a column) | |||||
<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><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.
<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.
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.
<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.
<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.