This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

We’ve split our roadmap into short, medium and long term and by components, content, code and build. This is subject to change and will be updated on a regular basis.

Striked-through text denotes completed items.

Short term

Components

  • Typography
  • Grid
  • Buttons
  • Breadcrumbs
  • Alpha/beta/live banners
  • Navigation
  • Alerts - info/error/warning
  • Cookie message

Content

  • Colour documentation
  • Grid examples</a>
  • SASS coding standards</a>
  • SASSDoc generated pages

Code

  • SASS Doc generation
  • SASS and JS linting
  • Finalise JavaScript implementation
  • JS unit tests
  • Visual regression tests

Build

  • Grunt build process
  • Live reload
  • Webfont (from SVGs)
  • Automated deployments
  • Alpha site
  • Mingle cards

Medium term

Components

  • Button loading states
  • Tables
  • Tabs
  • Panels
  • Footer
  • Forms & validation
  • Search boxes
  • Responsive embed

Content

  • Page layout examples/templates
  • JavaScript & ES6 coding standards
  • Accessibility test scripts
  • JS Documentation page generation

Code

  • Transition/animation guidelines
  • GTM & GA implementation
  • Copy to clipboard for code examples
  • JS Flow type annotations

Build

  • NPM Scripts (option to use NPM as build tool)
  • NPM Package
  • CDN Deployment
  • Beta site
  • Docker

Longer term

Components

  • Page hero
  • Ajax loaders
  • Alerts
  • Pagination

Content

  • General development principles
  • Wider content style guide e.g. tone of voice, grammar & mechanics

Code

  • TopHat refresh
  • Responsive emails

Build

  • Live site
  • Yeoman generator
  • Meteor package
  • Bower package

Edit on GitHub