Updated on: 11 April 2016

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).

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]-->
                    
                

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

Include a link to the pattern library JS file in the footer of your page.

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)