NETSCC Design System

Install with npm

npm is a JavaScript package manager that handles the installation and updates of third-party software, including the NETSCC Design System.

Requirements

On your command line, from your project's root directory, run npm install @nihruk/design-system.

This installs the NETSCC Design System's source and distribution code into your project, where you can import only those parts you need. 

@import "~@nihruk/design-system/dist/design-system.bundle.css";

import "~@nihruk/design-system/dist/design-system.bundle.js";

Bundling your application

Before your application can be published for the web, it must be bundled. The NETSCC Design System uses SCSS and newer EcmaScript features that must be transpiled before use. Additionally, bundlers such as Browserify, gulp, or Webpack are often able to skip parts of your code base and its dependencies that are not needed in your bundles.

How to choose and configure a bundler depends on your team and your project, and is outside the scope of the NETSCC Design System. For example, the NETSCC Design System documentation site you are currently reading was bundled using Bootstrap's Webpack configuration guide.

When to install using npm

You should install the NETSCC Design System using npm if you need to:

  • reduce the bundle size and bandwidth usage
  • override SCSS variables
  • host all assets yourself

Alternative package managers

Any package manager that uses the npm Registry is supported, but exact instructions may vary.