<commit_before>## Introduction

![Build Status](https://travis-ci.org/HelpfulHuman/HelpfulUI.svg)

**Helpful UI** is a specification for creating clean and predictable HTML and CSS.  The goal is to set standards that can be used across multiple projects to make it easier for developers to collaborate more effectively.

This project is heavily inspired by standards like [BEM](), [CSStyle](http://csstyle.io) and [SMACSS](https://smacss.com/),as well as, tools like the [nib](http://tj.github.io/nib/) stylus framework.

This library offers a variety of functions and mixins that focus on serving the goals of the specification.  If you're looking for a more feature-rich framework that expands on this library and specification, then you'll want to check out [Helpful UI's Elements](https://github.com/HelpfulHuman/HelpfulUI-Elements).

## Getting Started

Helpful UI is built in a very similar fashion to [nib](https://github.com/tj/nib).  You can even use the together if you like.  There are multiple ways you can use this library which we have listed below.

### Express / Connect

```javascript
var connect = require('connect')
var stylus = require('stylus')
var ui = require('helpful-ui')

var server = connect()

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(ui()) // magic sauce
}

server.use(stylus.middleware({
    src: __dirname,
    compile: compile
}))
```

### Gulp

If you're using the [gulp-stylus](https://www.npmjs.com/package/gulp-stylus) plugin, install `helpful-ui` and call it in gulp-stylus' `use` parameter.

```javascript
var gulp = require('gulp')
var stylus = require('gulp-stylus')
var ui = require('helpful-ui')

gulp.task('styles', function () {
  return gulp.src('*.styl')
    .pipe(stylus({
      use: [ ui() ]  // magic sauce
    }))
    .pipe(gulp.dest('./'))
})
```

### Bower

Install via Bower

```
bower install helpful-ui
```

## Usage

If you used the [Express / Connect](#express-connect) or [Gulp](#gulp) set-ups mentioned previously, you can simply import the `helpful-ui` package by name.

```stylus
@import 'helpful-ui'

// add your stylesheets below
@import 'components/*'
@import 'path/to/custom/file'
```

### Configuration

Helpful UI offers some basic configuration options that can be changed using a hash called `$hui`.  You need to place this hash before importing any Helpful UI files.

[Available options ➝](https://github.com/HelpfulHuman/HelpfulUI/wiki/Available-Options)

```stylus
$hui = {
  option-name: option-value
}

@import 'helpful-ui'
```

### CSS Reset: Zero

Helpful UI comes with its own normalization/reset sheet that is generated specifically for your project.  We call it "Zero".  You just need to `@import` it.

```stylus
@import 'helpful-ui/zero'
```

_Note: Because "zero" relies on Helpful UI's core files, you do need to manually import Helpful UI beforehand._
<commit_msg>Updating the README to better support future goals<commit_after>## Introduction

![Build Status](https://travis-ci.org/HelpfulHuman/HelpfulUI.svg)

**Helpful UI** is a specification for creating clean and predictable HTML and CSS.  The goal is to set standards that can be used across multiple projects to make it easier for developers to collaborate more effectively.

This project is heavily inspired by standards like [BEM](), [CSStyle](http://csstyle.io) and [SMACSS](https://smacss.com/), as well as, tools like the [nib](http://tj.github.io/nib/) stylus framework.

This library offers a small, focused collection of functions that serve the goals of the specification.  If you're looking for a framework that expands on this library, then you'll want to check out [Helpful UI's Elements](https://github.com/HelpfulHuman/HelpfulUI-Elements) package.

## Getting Started

Helpful UI is built in a very similar fashion to [nib](https://github.com/tj/nib).  You can even use the two together if you like.  There are multiple ways you can use this library, which we have listed below.

### Express / Connect

```javascript
var connect = require('connect')
var stylus = require('stylus')
var ui = require('helpful-ui')

var server = connect()

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(ui()) // magic sauce
}

server.use(stylus.middleware({
    src: __dirname,
    compile: compile
}))
```

### Gulp

If you're using the [gulp-stylus](https://www.npmjs.com/package/gulp-stylus) plugin, install `helpful-ui` and call it in gulp-stylus' `use` parameter.

```javascript
var gulp = require('gulp')
var stylus = require('gulp-stylus')
var ui = require('helpful-ui')

gulp.task('styles', function () {
  return gulp.src('*.styl')
    .pipe(stylus({
      use: [ ui() ]  // magic sauce
    }))
    .pipe(gulp.dest('./'))
})
```

### Bower

Install via Bower

```
bower install helpful-ui
```

## Usage

If you used the [Express / Connect](#express-connect) or [Gulp](#gulp) set-ups mentioned previously, you can simply import the `helpful-ui` package by name.

```stylus
@import 'helpful-ui'

// add your stylesheets below
@import 'components/*'
@import 'path/to/custom/file'
```

### Configuration

Helpful UI offers some basic configuration options that can be changed using a hash called `$hui`.  You need to place this hash before importing any Helpful UI files.

[Available options ➝](https://github.com/HelpfulHuman/HelpfulUI/wiki/Available-Options)

```stylus
$hui = {
  option-name: option-value
}

@import 'helpful-ui'
```

### CSS Reset: Zero

Helpful UI comes with its own normalization/reset sheet that is generated specifically for your project.  We call it "Zero".  You just need to `@import` it.

```stylus
@import 'helpful-ui'
@import 'helpful-ui/zero'
```

{'fraction_non_alphanumeric': 0.12866817155756208, 'fraction_numerical': 0.0, 'mean_word_length': 4.222121486854035, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '548092', 'n_tokens_mistral': 1834, 'n_tokens_neox': 1753, 'n_words': 652}