@nice-digital/design-system

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

Table of contents

• @nice-digital/design-system - Required software - Installation - Usage - SCSS - Precompiled - CDN

Required software

Install Node >= 6.9.0 and npm >= 5. Choose LTS from the Node download page.

Installation

Install the NICE Design System npm package into your project by running the following on the command line:

npm i @nice-digital/design-system --save

Then follow the usage steps below:

Usage

This package is the 'kitchen sink' package which gives you access to all styles, components and icons. It references @nice-digital/nds-core, @nice-digital/icons and all the component packages.

The installed package contains:

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

Note: Install and reference components directly if you don't need the full kitchen sink, for example tabs.

SCSS

Import the NICE Design System into your application:

@forward '@nice-digital/design-system/scss/nice-design-system';

This gives you everything: core (mixins, functions, variables, placeholders), CSS resets, icon font, default styles and all components. Visit the documentation site for full details on what's available in the SCSS.

If you want the design system without all of the components you can install the base styling (CSS resets and global ):

@forward "@nice-digital/design-system/scss/base";

You can then start using the SCSS from the NICE Design System, for example:

@use "@nice-digital/nds-core/scss/colours";

.something {
	color: colours.$text;
}

Precompiled

The @nice-digital/design-system npm package includes a dist folder with pre-compiled assets (CSS and JS). These are useful for quick prototypes, but aren't recommended for production because:

• it uses compiled CSS so you lose the benefit of all the SCSS mixins, function and variables
• you get everything: you can't pick and choose just what you need.

Use the dist folder as a static directory with Express to serve these precompiled files:

app.use(
	express.static(__dirname + "/node_modules/@nice-digital/design-system/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>

Note: you'll probably also need to serve the nice-icons icon font if you're doing this: app.use(express.static(__dirname + "/node_modules/@nice-digital/icons/dist/"));.

Alternatively, use a script to copy the precompiled assets out of the node_modules folder to somewhere where you can serve them.

CDN

We are planning on publishing the precompiled version of the Design System to the NICE CDN. Watch this space.