Overview

For most types of pages, we use either a ‘one-third and two-thirds’ or a ‘single-column’ layout.

The default maximum page width is 1200px with breakpoints to make the content responsive to screen size.

Breakpoints

We use a bootstrap-derived grid with some changes to breakpoint values and the default container size.

// Default (smaller phones, up to 575px)
@media (max-width: 575px) { ... }
// Small devices (larger phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


Containers

// Sets a max-width at each responsive breakpoint
.container
// Breaks out of max-width to 100% viewport
.container-fluid
// Example of a standard container implementation
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>


Grid system

The grid system works on a set of 12 columns. Use the grid system to lay out the content on your service’s pages.

Most of our pages follow a ‘one-third and two-thirds’ or ‘col-4 and col-8’ layout, but the grid system allows for a number of additional combinations when necessary.

The grid is structured with a ‘.row‘ wrapper which acts as a row to contain your grid columns.

You can add columns inside this wrapper to create your layout. To define your columns add the class beginning with ‘.col-lg-‘ to a new container followed by the width, for example, ‘.col-lg-9‘ to apply your desired width.

// Must be used inside a container to allow columns to display properly.
.row
// Breaks at bootstrap 'lg' media query width
.col-lg
// Breaks at bootstrap 'breakpoint' with the designated 'columns' as max width
.col-{breakpoint}-{columns}


If you want columns that will automatically flex to evenly spread out inside the container just use the media query class without a breakpoint:

<div class="container">
<div class="row">
<div class="col-lg">Column one</div>
<div class="col-lg">Column two</div>
<div class="col-lg">Column three</div>
</div>
</div>


Common layouts

One-third and two-thirds

This pattern is used for our standard service page. If the service fits in criteria A, B or C then it must be displayed in this format

<div class="row">
<div class="col-lg-4">
<h4>Contents</h4>
<p>This is a paragraph inside a one-third wide column</p>
</div>
<div class="col-lg-8">
<h3>Section title</h3>
<p>This is a paragraph inside a two-thirds wide column</p>
</div>
</div>


Single column

This pattern is used for our record pages for things like a School or a Recycling Centre.

<div class="row">
<div class="col">
<h3>Section title</h3>
<p>This is a paragraph inside a two-thirds wide column</p>
</div>
</div>