Layout

Layout covers our breakpoints, grid and page structure.

Breakpoints

Breakpoints are the predefined widths where page layout automatically changes to make the best use of the space available.

Breakpoints are based on the width of a browser window and not the size of a screen or device. For example, someone using a large computer monitor might not have a browser window that fills the whole screen.

When designing it is important to think about breakpoints and not specific devices.

Grid

Our grid is made up of 12 columns with 30px gutters between them. However, it is not recommended to use all the columns at all the breakpoints. See below for the recommended maximum columns to use at each breakpoint.

Breakpoint Width covered Recommended maximum number of columns Content area behaviour Content area width
Extra-small Up to 576px 1 Stretches to fill window with 15px margins Maximum width 545px
Small 576px – 767px 1 Fixed width 510px
Medium 768px – 991px 3 Fixed width 690px
Large 992px – 1199px 12 Fixed width 930px
Extra large 1220px and above 12 Fixed width 1100px

Bootstrap

Our breakpoints and grid use Bootstrap. You can read more about breakpoints and grid system on the Bootstrap website.

Page structure

Pages are made up of three areas:

  • top
  • middle
  • bottom

Top

The top of the page must contain, in this order, the skip to content link, cookie banner, and header.

If you use the product header, product banner or hero banner these will also appear in the top area.

Middle

The middle is where the main content of the page goes.

There are two ways to handle the layout of the main content:

  • use the block block-page class
  • use the grid

Using the ‘block block-page’ class

The block block-page class wraps all the main content in a single, white container.

You can then use the grid to create dynamic layouts with separate blocks of content that are nested within this container.

Example Open in a new tab: block layout

Content block 1

Content block 2 

<div class="block block-page">
  <div class="row">
    <div class="col-sm-6">
      <p style="padding: 20px; border: 1px solid #cbc9cd">
        <strong>Content block 1</strong>
      </p>
    </div>
    <div class="col-sm-6">
      <p style="padding: 20px; border: 1px solid #cbc9cd">
        <strong>Content block 2</strong>
      </p>
    </div>
  </div>
</div>

Using the grid

If you only use the grid to create separate content areas, then the grey background of the page will show between them.

Example Open in a new tab: grid layout

Content block 1

Content block 2 

<div class="row">
  <div class="col-sm-6">
    <p style="padding: 20px; background: #fff">
      <strong>Content block 1</strong>
    </p>
  </div>
  <div class="col-sm-6">
    <p style="padding: 20px; background: #fff">
      <strong>Content block 2</strong>
    </p>
  </div>
</div>

Bottom

The bottom is used to display the footer only.

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.