2019-11-10 admin


什么是nice-experience,Your source for creating beautiful, consistent experiences across NICE


<g-emoji class=“g-emoji” alias=“art” fallback-src=“”>🎨</g-emoji> NICE Design System

Your source for quickly creating consistent on-brand NICE digital services.

npm Bower GitHub release License Dependencies Dev dependencies

<details><summary>Table of contents</summary>

  • What is it?
  • Browser support
  • Project structure
  • Development
    • Getting started
      • npm
      • Grunt
    • JavaScript
    • SASS
    • Icons
  • Test
  • Installation
    • CDN
    • Install with yarn
    • Usage
      • From source
      • CDN
      • Precompiled</details>

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.

Browser support

IE/Edge Chrome Firefox Safari Safari (iOS) Android
Internet Explorer Chrome Firefox Safari Safari (iOS) Android
8+ 52+ 47+ Latest Latest Latest

And all other modern browsers

We support IE8 because of our audience - traffic to 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 for more information on NICE’s policy.

Project structure

Folder Description
.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/javascripts Main JavaScript source + JSDoc config and ESLint config
- 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


Getting started

	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:

  • yarn

Note: if you prefer to use npm rather than yarn, run npm i instead.

We use Grunt as a task runner hence the dependency on Node. If you haven’t used Grunt before, be sure to check out the Getting Started guide first.

Run npm start from the command line for development which will:

  • run tests
  • lint JavaScript and SCSS
  • 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:


Run npm start and npm run test:watch for development. However, there are other npm scripts available to be run for other tasks:

Task Description
npm start Simply runs grunt under the hood
npm run dist Builds the projects in distribution mode for release
npm run dist:teamcity Builds the projects in distribution mode for release via teamcity
npm test Runs JS tests
npm test:teamcity Runs JS tests (with the mocha-teamcity-reporter)
npm run test:watch Runs JS test tests (with min reporter) and watches for changes. Useful to run in development alongside grunt.
npm run test:coverage Runs JS test tests and generates a coverage report with Istanbul into the coverage folder
test:coverage:teamcity Runs JS test tests and generates a coverage report with Istanbul (using the mocha-teamcity-reporter).
npm run lint Lints SASS and JS (uses grunt lint under the hood)

| 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 javascript folder 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 --save instead.

Note: The Design System is on Bower, but this installation method is unsupported.

The installed package contains:

  • source SASS
  • pre-compiled (dist) CSS
  • source (ES6) JavaScript
  • pre-compiled (dist) JavaScript
  • static assets like favicon and logo.

Note: The icon font is referenced as a dependency from @nice-digital/icons.


From source

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.

See the javascripts directory for further information on how to build from JavaScript 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:

<!-- Font from Google & compiled/minified CSS -->
<link href=",400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/@nice-digital/design-system/dist/stylesheets/nice.min.css">

<!-- jQuery from CDN & compiled/minified JavaScript -->
<script src=""></script>
<script src="/node_modules/@nice-digital/design-system/dist/javascripts/nice.min.js"></script>

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:

<link rel="stylesheet" href="/stylesheets/nice.min.css" type="text/css">
<script src="/javascripts/nice.min.js"></script>

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.


转载请注明:文章转载自 JavaScript中文网 []