18f-contrib-web-design-standards

This is a node-sass based wrapper of the U.S. Web Design Standards library. There are no modifications made to the library.

Contents

• Requirements
• Installation
• Usage
  • Basic Usage
  • Grunt
  • node-sass
• Getting Help
• Testing
• Credits
• License

Requirements

• node
• gulp.js -or- Grunt -or- node-sass

This version includes bourbon and neat in it.

Installation

To install as a development dependency, run:

npm install --save-dev 18f-contrib-web-desgin-standard

If you need it in production, replace --save-dev with --save.

Usage

Basic Usage

Stylesheet usage

After setting up Grunt or gulp.js, import the entire U.S. Web Design Standards like this.

@import "all";

Grunt Usage

Using grunt-sass

The grunt-sass task uses node-sass (LibSass) underneath.

Example config:

Using the compileTasks registered task. Make sure sass:dev is included in the compileAssets registration if it's not already there.

module.exports = function (grunt) {
  grunt.registerTask('compileAssets', [
    'clean:dev',
    'jst:dev',
    'less:dev',
    'sass:dev',  // Add this line.
    'copy:dev',
    'coffee:dev'
  ]);
};

Confiure the sass task like this:

module.exports = function(grunt) {

  grunt.config.set('sass', {
    options: {
      sourceMap: true,
      includePaths: require('18f-contrib-web-design-standards').includePaths
    },
    dev: {
      files: {
        '.tmp/public/styles/main.css': 'assets/styles/main.scss'
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
};

Example config wihtout using compileAssets:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        includePaths: require('18f-contrib-web-design-standards').includePaths
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
  }
});

node-sass Usage

Using it directly with node-sass.

var sass    = require('node-sass')
var neat = require('node-neat');

sass.render({
  file: './application.scss',
  success: function(css){
    console.log(css);
  },
  error: function(error) {
    console.log(error);
  },
  // includePaths: neat.with('other/path', 'another/path'),
  // - or -
  includePaths: neat.includePaths,
  outputStyle: 'compressed'
});

Getting Help

Feel free to open a ticket on GitHub.

Testing

How do you know the setup is correct?

You'll know the pipeline is setup correctly when your path/to/output.css stylesheet is filled with 2,000+ lines of .usa-* class definitions.

Automated testing

This is to be fleshed out similar to node-neat.

Credits

The U.S. Web Design Standards is made by the fine team at 18F.

License

18f-contrib-web-design-standards is Copyright © 2015 Brian DeRocher. It is free software, and may be redistributed under the terms specified in the LICENSE file.