nice-experience

Your source for creating beautiful, consistent experiences across NICE

NICE Experience

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

Table of contents

What is it?

NICE Experience is a replacement for NICE.Bootstrap. It's a front-end toolkit/pattern library and guidelines for rapidly building modern, accessible web apps that are consistent with the NICE brand guidelines.

Browser support

IE/EdgeChromeFirefoxSafariSafari (iOS)Android
8+52+47+LatestLatestLatest

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.

Accessibility

Experience has been built with accessibility in mind and is built to conform to WCAG 2.0 AA.

If you are building an application with Experience, please keep the same level of conformance.

See https://www.nice.org.uk/accessibilityfor more information.

Project structure

FolderDescription
.githubGithub templates folder
.grunt-tasksGrunt task configs loaded in from Gruntfile.js
distBuilt files for distribution with each new version
srcThe main source of Experience
- src/assetsCommon static assets
- src/componentsComponents (SASS/JS/Nunjucks view/test)
- src/iconsSVG icon font source
- src/javascriptsMain Experience JS + JSDoc configand ESLint config
- src/stylesheetsMain Experience SASS + SASS Lint config+ SASS Doc custom theme
serverExpress dev server, views etc for testing and building components
testTest setup and unit tests

Development

Getting started

TL;DR:
    1. `npm i -g grunt-cli`
    2. `npm i`
    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:

  • npm i -g grunt-cli
  • npm i

We use Grunt as a task runner hence the dependency on Node. If you haven't used Gruntbefore, be sure to check out the Getting Startedguide first.

Run npm startfrom the command line 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:

npm

Run npm startand npm run test:watchfor development. However, there are other npm scripts available to be run for other tasks:

TaskDescription
npm startSimply runs gruntunder the hood
npm testRuns JS tests
npm run test:watchRuns JS test tests (with min reporter) and watches for changes. Useful to run in development alongside grunt.
npm run test:coverageRuns JS test tests and generates a coverage report with Istanbulinto the coveragefolder
npm run lintLints SASS and JS (uses grunt lintunder the hood)
npm run releaseBuilds 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.

Grunt

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.jsfor more information.

JavaScript

See the javascriptfolder for more information.

SASS

See the stylesheetsfolder for more information.

Icons

See the iconsfolder for more information.

Tests

See the testfolder for more information.

Installation

NICE CDN

TODO - we will deploy pre-compiled versions onto cdn.nice.org.uk

Install with npm

npm i nice-experience

Then follow the usagesteps below...

Install with bower

bower i nice-experience

Then follow the usagesteps below...

Usage

Precompiled

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="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/nice-experience/dist/stylesheets/experience.min.css">

<!-- jQuery from CDN & compiled/minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/node_modules/nice-experience/dist/javascripts/experience.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-experience/dist/"));

and then reference it from your HTML as:

<link rel="stylesheet" href="/stylesheets/experience.min.css" type="text/css" media="screen" charset="utf-8">
<script src="/javascripts/experience.min.js"></script>

OR you can use a copy command (with Grunt or similar) to copy the compiled assets out of the node_modulesfolder to somewhere where you can serve them.

From source

The npm package contains the source code as well as the precompiled assets.

Repository

https://github.com/nhsevidence/NICE-Experience.git


上一篇:node-common-errors
下一篇:grunt-sassdoc

相关推荐

  • 【node】相当nice且详细的commander.js用例

    (前言 "前言")前言 在当下,作为一名前端码农,不知道Nodejs是不可原谅的。可以说,除了一些特别要求的业务范畴,常见的后端业务Nodejs都能handle住。

    2 年前
  • nicercast

    simple icecast compliant streaming server nodecast ======== Simple node.js icecast compliant strea...

    2 个月前
  • nicely-format

    Copy of avajs/prettyformat @ava/prettyformat Travis build status(http://img.shields.io/travis/avaj...

    8 个月前
  • nicedate

    nicely formatted dates since 7d ago nicedate display nicely, but tersely formatted dates. examp...

    2 个月前
  • nicecss

    A Nicemondays CSS framework NiceCSS ======== The awesome and nice CSS framework Documentation(ht...

    7 个月前
  • nice-validator

    Simple, smart and pleasant verification solution. nicevalidator Build Status(https://travisci.org...

    2 年前
  • nice-try

    Tries to execute a function and discards any error that occurs nicetry Travis Build Status(https:...

    1 年前
  • nice-route53

    a nicer API to Amazon's Route53 This package provides the API you really wanted to Amazon's Route...

    3 个月前
  • nice-package

    Clean up messy package metadata from the npm registry nicepackage ✨📦✨ Build Status(https://travi...

    8 个月前
  • nice-is-url

    Checks if a string is a valid url niceisurl Build Status(https://travisci.org/vigourio/niceisur...

    10 个月前

官方社区

扫码加入 JavaScript 社区