NCARB Design Library

Objective

A base visual language upon which projects can be built. Instantiate a sample design library for NCARB based on design elements for three completed projects: NCARB.org home page, Roster, Renewals. We will also use the IDP app to inform the over visual styling.

A Design Library is a collection of UI elements and style guidelines that can be used across different properties to ensure a cohesive design.

Scope

The design system sample should include:

• entry page to orient people on the design library
• visual index to provide an overview of the NCARB aesthetic, including colors and typography
• component index to provide an overview of all design components
• component detail pages for up to 10 components and their variations, including light guidelines for usage

Development

To contribute to this library you will need to use the Grunt.js tools provided in order to compile the SCSS files in this repo.

Commands

• grunt watch: Have grunt watch the files and perform the following tasks:
  • Recompile .scss files that have changed
  • Minify complied CSS into a single file (both base and component CSS)
  • Run jshint on .js files
  • Post to livereload (compatible with the LiveReload browser plugin)

Directory structure

• sass/: Global scss files
• js/: Global JS
• img/: Global images
• pages/: Page type examples
• components/: Components organized by directory. For example, components/he01 is version 01 of the Header component. It should contain the following:
  • [name].html markup file
  • [name].scss SASS file
  • [name].js Javascript file (if necessary)
  • i directory for images (if necessary)
• css/: Target directory for global, compiled scss files
• css/components/: Target directory for component scss files
• bower_components/: Dependencies installed by the Bower package manager. For example, jQuery.
• node_modules/: Dependencies installed by the Node package manager (NPM). For example, Grunt.
• package.json: Manifest of Node modules.
• config.rb: To configure Compass
• bower.json: Manifest of Bower packages

Running

• npm install
• npm run start

Deploying

Once merged to master branch, the content is deployed using github pages and should be available at http://ncarb.github.io/StyleGuide/