README
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
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.