ONS Design System
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
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.
- install nvm
- Run nvm install in the project directory (this will use .nvmrc)
Start a local server
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
Note: This will only run tests on the ES6 bundle.
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.
Run tests in BrowserStack
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_ACCESS_KEY environment variables to allow authentication with BrowserStack. Username and access keys can be found under Automate on the BrowserStack settings page.
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.