Skip to content
Switch branches/tags
This branch is 1559 commits ahead of ochiroma:master.
Fetch upstream

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

ONS pattern library

A tile design friendly pattern library with a simple responsive grid inspired by BBC’s GEL consisting of 16px columns.

Use the pattern library's site to see examples of how to use it.

How to install and run

  1. Clone this repo onto your machine.
  2. Install Node and NPM.
  3. Run npm install from the root of the repo you've cloned onto your machine.
  4. Use the JS and CSS files in the dist directory.

Updating Sixteens

  • Either run npm run dev or in the root of the project. This boots up an npm watch command that'll re-build your JS, CSS on change and host it at localhost:9000/dist/folder/file.
  • New JS files go into the js directory and the path added into the config object in the package.json. You'll need to restart npm run dev if you edit the package.json for the watch to detect them.
  • New SCSS files should be added to the scss directory. Add the path into main.scss and old-ie.scss.

Updating 'work in progress' CSS

Sixteens builds a separate CSS file for 'work in progress' styling.

SCSS for these patterns are stored in scss/work-in-progress. Once they're a production pattern they should be moved into the usual SCSS file structures.

To build the work in progress patterns run: npm run build-work-in-progress

or to re-build these patterns automatically when an SCSS file is updated run: npm run watch-work-in-progress

This will create or update the work-in-progress.css file in dist.


No description, website, or topics provided.



No packages published