# 18f-contrib-web-design-standards

> Wrapping the 18F Web Design Standards for use with Node.

Latest version **1.0.1** (published 2015-10-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install 18f-contrib-web-design-standards
pnpm add 18f-contrib-web-design-standards
yarn add 18f-contrib-web-design-standards
bun add 18f-contrib-web-design-standards
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2015-10-25 |
| First published | 2015-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brian DeRocher |
| Maintainers | openbrian |
| Keywords | CSS, 18F, design, standard, sass |

## Links

- npm: https://www.npmjs.com/package/18f-contrib-web-design-standards
- Repository: https://github.com/openbrian/18f-contrib-web-design-standards
- Homepage: https://github.com/openbrian/18f-contrib-web-design-standards#readme
- Issues: https://github.com/openbrian/18f-contrib-web-design-standards/issues
- npm.io page: https://npm.io/package/18f-contrib-web-design-standards

## Dependencies (1)

- [node-neat](https://npm.io/package/node-neat.md) ^1.7.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2015-10-25
- 1.0.0 — 2015-10-19

## README

*This is a node-sass based wrapper of the [U.S. Web Design Standards](https://playbook.cio.gov/designstandards/) library.  There are no modifications made to the library.*

# Contents

- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
  - [Basic Usage](#basic-usage)
  - [Grunt](#grunt-usage)
  - [node-sass](#node-sass-usage)
- [Getting Help](#getting-help)
- [Testing](#testing)
- [Credits](#credits)
- [License](#license)

# Requirements
- [node](http://nodejs.org)
- [gulp.js](http://gulpjs.com) -or- [Grunt](http://gruntjs.com) -or- [node-sass](https://github.com/andrew/node-sass)

This version includes bourbon and neat in it.

# Installation

To install as a development dependency, run:

```bash
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.

```scss
@import "all";
```

## Grunt Usage

### Using *grunt-sass*

The [grunt-sass](https://github.com/sindresorhus/grunt-sass) task uses
[node-sass](https://github.com/andrew/node-sass)
([LibSass](https://github.com/hcatlin/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.

```javascript
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:

```javascript
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:

```javascript
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](https://github.com/andrew/node-sass).

```javascript
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](https://github.com/openbrian/18f-contrib-web-desgin-standard/issues) 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](https://18f.gsa.gov).

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

---
_Source: https://npm.io/package/18f-contrib-web-design-standards · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._