什么是nice-experience，Your source for creating beautiful, consistent experiences across NICE
<g-emoji class=“g-emoji” alias=“art” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f3a8.png”>🎨</g-emoji> NICE Design System
Your source for quickly creating consistent on-brand NICE digital services.
<details><summary>Table of contents</summary>
- What is it?
- Browser support
- Project structure
- Getting started
- Getting started
- Install with yarn
- From source
What is it?
NICE Design System is a replacement for NICE.Bootstrap. It’s a design system, front-end toolkit and pattern library 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.
NICE Design System has been built with accessibility in mind and is built to conform to WCAG 2.0 AA.
See https://www.nice.org.uk/accessibility for more information on NICE’s policy.
|.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|
|- src/assets||Common static assets|
|- src/components||Components (SASS/JS/Nunjucks view/test)|
|- src/stylesheets||Main 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\. `yarn` 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:
Note: if you prefer to use npm rather than yarn, run
npm start from the command line for development 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 start and
npm run test:watch for development. However, there are other npm scripts available to be run for other tasks:
||Builds the projects in distribution mode for release|
||Builds the projects in distribution mode for release via teamcity|
||Runs JS tests|
||Runs JS tests (with the mocha-teamcity-reporter)|
||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 Istanbul into the coverage folder|
||Runs JS test tests and generates a coverage report with Istanbul (using the mocha-teamcity-reporter).|
||Lints SASS and JS (uses
npm run release | 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. | |
npm run release:minor | Does the same as release but with a minor version |
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.js#L35-L47 for more information.
See the stylesheets folder for more information.
Icons are used via a separate package, NICE Icons.
See the test folder for more information.
Install with yarn
yarn is the recommended way of installing the NICE Design System into your project. Run the following from the command line to install it as a dependency:
yarn add @nice-digital/design-system -D
Then follow the usage steps below…
Note: if you prefer to use npm rather than yarn, run npm
npm i @nice-digital/design-system --saveinstead.
Note: The Design System is on Bower, but this installation method is unsupported.
The installed package contains:
- source SASS
- pre-compiled (dist) CSS
- static assets like favicon and logo.
Note: The icon font is referenced as a dependency from @nice-digital/icons.
The yarn/npm package contains the source code as well as the precompiled assets.
See the stylesheets directory for further information on how to build from SASS source in your project.
- Useful for rapid prototyping
- no need for CSS/JS build steps: just reference the pre-compiled CSS/JS
- uses compiled CSS so loses the benefit of SASS mixins, function and variables
- you get everything: you can’t pick and choose just what you need
- not recommended for production setups.
CDN is coming soon…
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-digital/design-system/dist/")); app.use(express.static(__dirname + "/node_modules/@nice-digital/icons/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_modules folder to somewhere where you can serve them.