Using the pattern library

The pattern library comes with one Javascript file and three CSS files (old IE, IE9 and main - these'll be explained in more detail). There is a unique ID for each build of the pattern library, the latest version is b3c7947.

Download or link to the files from:

These files should be wrapped in conditional statements. So, it should look like:

                    
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="https://onsdigital.github.io/ons-pattern-library-starter/sixteens/css/old-ie.css">
<![endif]-->
<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="https://onsdigital.github.io/ons-pattern-library-starter/sixteens/css/ie-9.css">
<![endif]-->
<!--[if gt IE 9]><!-->
    <link rel="stylesheet" type="text/css" href="https://onsdigital.github.io/ons-pattern-library-starter/sixteens/css/main.css">
<![endif]-->
                    
                

'Work in progress' patterns

The pattern library includes patterns that are being actively worked on, but may not be part of our production codebase or website yet.

These are marked with the label:
Work in progress

To include these patterns include the extra CSS file for draft patterns:
https://cdn.ons.gov.uk/sixteens/8bf0290/css/work-in-progress.css

CSS

Include each of the CSS files in the head of your page. There are three CSS files because:
  • old-ie.css removes media queries so that styling doesn't break in IE8.
  • ie9.css is split into two files to get around the IE9 CSS selector limit.
  • main.css is the ordinary CSS which will be applied to all modern browsers.

Javascript

Patterns that are Javascript enhanced will have the label:
Javascript enhanced

Include a link to the pattern library JS file in the footer of your page (we suggest only applying it to IE9 and above).

How is the pattern library built?

All styling and Javascript has been built as progressive enhancement, meaning that every user, regardless of browser or device, can get an equal access to the fundamental information on a web page.

The patterns are built in the 'Sixteens' repository on the ONSDigital Github. To have a play around with the original code follow the instructions in the README to install and use the pattern library.

Browser support

The pattern library has been tested on:

Desktop

  • Internet Explorer 8 (not Javascript enhanced)
  • Internet Explorer 9, 10 and 11
  • Edge (latest)
  • Google Chrome (latest)
  • Mozilla Firefox (latest)
  • Safari (latest)

Mobile

  • Google Chrome (latest)
  • Safari (latest)