@nice-digital/design-system

    1.2.30 • Public • Published

    @nice-digital/design-system

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

    npm GitHub release License Dependencies Dev dependencies lerna

    Table of contents

    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:

    @import "~@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.

    Problems with tilde (~) imports?

    We use tildes in SCSS import paths, which works out of the box with sass-loader in webpack. Use node-sass-tilde-importer if you're using node-sass directly, or grunt-sass-tilde-importer.

    If you want the design system without all of the components you can install the base styling:

    @import "~@nice-digital/design-system/scss/base";

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

    .something {
    	color: $colour-nice-teal;
    	margin: rem($spacing-large);
    }

    If you want to import the design system into a CSS module you can scope the import globally:

    :global {
    	@import "~@nice-digital/design-system/scss/nice-design-system.scss";
    }

    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.

    Keywords

    none

    Install

    npm i @nice-digital/design-system

    DownloadsWeekly Downloads

    57

    Version

    1.2.30

    License

    MIT

    Unpacked Size

    26.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • martingallagher1980
    • ditprogrammatic
    • ediblecode
    • josealmeida
    • john-williams
    • mark-nice
    • nansenst
    • colin.mazurkiewicz
    • warrenkeith
    • imranazad
    • eleanormollett