Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Add feature request issue template (#247) Feb 27, 2019
.travis Fix automatic package.json updating (#144) Feb 8, 2019
docs Create npm package of built CSS, JS, and macros (#143) Feb 8, 2019
.prettierignore Webpack build working Nov 22, 2018
.remarkrc Initial README (#58) Jan 10, 2019
.sass-lint.yml Update linter rules Dec 18, 2018
svgo-config.js Create npm package of built CSS, JS, and macros (#143) Feb 8, 2019

ONS Design System

GitHub release Travis tests codecov Codacy Badge GitHub pull requests Github last commit Github contributors

Installing as a dependency

Nunjucks macros for components and templates are available from npm. Built CSS and JS is also available if you need access to pre-release CSS/JS, otherwise CSS and JS should be loaded from the CDN.

yarn add @ons/design-system

Run Locally

You'll need Git, Node.js, and Yarn to run this project locally.

The version of node required is outlined in .nvmrc.

Using nvm (optional)

If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.

To enable this we use nvm (Node Version Manager) to switch between versions easily.

  1. install nvm
  2. Run nvm install in the project directory (this will use .nvmrc)

Install dependencies

yarn install

Start a local server

yarn start

Once the server has started, navigate to http://localhost:3030


To test locally ensure you've followed all the steps above to install dependencies. You can have three options:

Run tests locally in watch mode

This will watch your test files and JavaScript for changes and rerun the test suite each time a change is detected.

Note: This will only run tests on the ES6 bundle.

yarn test:local

Run ES6 and ES5 bundle tests

Running this will run the test suite twice, once against the ES6 bundle and again against the ES5 bundle. However, as local tests only run on evergreen browsers it will be unlikely that you see the ES5 testing fail if the ES6 testing passes.

yarn test

Run tests in BrowserStack

All unit tests are automatically cross browser tested in BrowserStack by TravisCI when a pull request is created or if a change is pushed to an existing pull request.

You can also run cross browser testing in BrowserStack manually against your local branch by running this command:

Note: You will need to set your BROWSER_STACK_USERNAME and BROWSER_STACK_ACCESS_KEY environment variables to allow authentication with BrowserStack. Username and access keys can be found under Automate on the BrowserStack settings page.

yarn test:browserstack


Generate a build into ./build. Will also create Webpack Bundle Analyzer reports for both the ES6 and ES5 bundle and open them in your default browser.

yarn build

Recommended Visual Studio Code plugins for this project

You can’t perform that action at this time.