A node-sass based NPM package for the U.S. Web Design Standards.
Switch branches/tags
Nothing to show
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Initial commit. Oct 19, 2015
.gitignore Initial commit. Oct 19, 2015
Makefile Initial commit. Oct 19, 2015
README.md Initial commit. Oct 19, 2015
TODO Initial commit. Oct 19, 2015
index.js Initial commit. Oct 19, 2015
package.json Bump the version to 1.0.1. Oct 25, 2015


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



This version includes bourbon and neat in it.


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.


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', [
    'sass:dev',  // Add this line.

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'


Example config wihtout using compileAssets:

  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');

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

Getting Help

Feel free to open a ticket on GitHub.


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.


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


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.