basecss/README.md

NPM module which extracts basic CSS rules for inlining them in your index.html, similar to critical CSS

# BaseCSS [![Build Status][ci-img]][ci][![npm version](https://badge.fury.io/js/basecss.svg)](http://badge.fury.io/js/basecss)

NPM module which extracts basic CSS rules for inlining them in your index.html, similar to critical CSS.

[ci-img]:  https://travis-ci.org/Keyes/basecss.svg?branch=master
[ci]:      https://travis-ci.org/Keyes/basecss

## Installation

```
npm install basecss --save
```


## Usage

```js
var BaseCSS = require('basecss');

var options = {
    htmlFile: 'index.html',
    cssFile: 'styles.min.css',
    selectors: [
        '.col-',
        '.row',
        'h[1-6]'
    ]
};

new BaseCSS(options).run();

```

### Options

Default options:
```js
{
    cssFile:   '',
    htmlFile:  '',
    selectors: [
    ],
    propertiesExclude: [
        'animation[\-a-z]*', 'transition[\-a-z]*',
        'cursor', 'nav[\-a-z]*', 'resize',
        'image[\-a-z]*'
    ],
    includeFontFace: true,
    minifyCSS: true,
    overwriteCSS: true,
    showLog: true
}
```

#### options.cssFile
Only necessary of you use basecss standalone

#### options.htmlFile
File, in which the CSS should be included. Needs a head-Element.

#### options.selectors
Array of selectors for which should be looked. Can contain regular expressions.

For example:

```js
selectors: [
	'.base-',
    '.col-(sm,lg)-',
    'nav', 
    'article'
]
```

#### options.propertiesExclude
CSS properties that should be excluded. It's mostly good to leave the default value here, you mostly do not want animations to appear.

#### options.includeFontFace
Basecss includes by default all @font-face rules in the beginning of the css, so that your fonts get rendered properly. You may want to disable this.

#### options.minifyCSS
If the CSS should be minified before being inserted - you normally want this

#### options.overwriteCSS
If set to true, overwrites already existing inline css created by basecss - set to false if you want to process multiple css files after another. Then if appends every css block.

#### options.showLog
Enabled/disabled the "success!" message at the end