Your source for creating beautiful, consistent experiences across NICENICE Experience
Welcome to NICE Experience. Your source for quickly creating consistent on-brand NICE digital services.
Table of contents
- What is it?
- Browser support
- Project structure
What is it?
NICE Experience is a replacement for NICE.Bootstrap. It's a front-end toolkit/pattern library and guidelines for rapidly building modern, accessible web apps that are consistent with the NICE brand guidelines.
And all other modern browsers
We support IE8 because of our audience - traffic to nice.org.uk as of 22/09/2016:
- 15.80% - IE11
- 5.08% - IE8
- 2.61% - IE9
- 1.78% - IE10
- 0.56% - IE7
To support older IE we have separate builds of our JS and CSS.
Experience has been built with accessibility in mind and is built to conform to WCAG 2.0 AA.
If you are building an application with Experience, please keep the same level of conformance.
See https://www.nice.org.uk/accessibilityfor more information.
|.github||Github templates folder|
|.grunt-tasks||Grunt task configs loaded in from Gruntfile.js|
|dist||Built files for distribution with each new version|
|src||The main source of Experience|
|- src/assets||Common static assets|
|- src/components||Components (SASS/JS/Nunjucks view/test)|
|- src/icons||SVG icon font source|
|- src/stylesheets||Main Experience SASS + SASS Lint config+ SASS Doc custom theme|
|server||Express dev server, views etc for testing and building components|
|test||Test setup and unit tests|
TL;DR: 1. `npm i -g grunt-cli` 2. `npm i` 3. `npm start`
To run the dev server and tests on your local machine, first install:
Then before you can run any tasks, run the following from the command line to install dependencies:
npm i -g grunt-cli
npm startfrom the command line which will:
- run tests
- build the required assets (JS/CSS/web fonts)
- serve the development site
- watch for change to source files
There are also other commands you can run:
npm run test:watchfor development. However, there are other npm scripts available to be run for other tasks:
|Simply runs |
|Runs JS tests|
|Runs JS test tests (with min reporter) and watches for changes. Useful to run in development alongside grunt.|
|Runs JS test tests and generates a coverage report with Istanbulinto the coveragefolder|
|Lints SASS and JS (uses |
|Builds the assets in dist mode, increments package.json patch version, pushes a new git tag, creates a GitHub release (with release notes from commits since last release) and creates an npm release.|
Some of the npm scripts use Grunt tasks under the hood. These Grunt tasks (and aliases) can be run directly e.g.
grunt lint. However, we recommend using the npm scripts themselves. See the task aliases in Gruntfile.jsfor more information.
See the stylesheetsfolder for more information.
See the iconsfolder for more information.
See the testfolder for more information.
TODO - we will deploy pre-compiled versions onto cdn.nice.org.uk
Install with npm
npm i nice-experience
Then follow the usagesteps below...
Install with bower
bower i nice-experience
Then follow the usagesteps below...
Not recommended for production, but useful for quick prototypes, the npm package includes a dist folder with precompiled assets.
You can reference directly if you have the correct permissions:
OR if you're using express you can use the dist folder as a static directory:
app.use(express.static(__dirname + "/node_modules/nice-experience/dist/"));
and then reference it from your HTML as:
OR you can use a copy command (with Grunt or similar) to copy the compiled assets out of the node_modulesfolder to somewhere where you can serve them.
The npm package contains the source code as well as the precompiled assets.