clean up README

madeleineostoja · Aug 1, 2017 · d7ce517 · d7ce517
1 parent 5681cb6
commit d7ce517
Showing 1 changed file with 120 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -3,48 +3,77 @@
 </p>
 
 <p align="center">
-  <a href="https://npmjs.org/package/rucksack-css"><img src="https://badge.fury.io/js/rucksack-css.svg" alt="NPM version" /></a>
+  <a href="https://npmjs.org/package/rucksack-css"><img src="https://img.shields.io/npm/v/rucksack-css.svg" alt="NPM version" /></a>
+  <a href="https://www.npmjs.com/package/rucksack-css"><img src="https://img.shields.io/npm/dm/rucksack-css.svg" alt="Downloads" /></a>
   <a href="https://travis-ci.org/simplaio/rucksack"><img src="https://travis-ci.org/simplaio/rucksack.svg?branch=master" alt="Build satus" /></a>
-  <a href="https://david-dm.org/simplaio/rucksack"><img src="https://david-dm.org/simplaio/rucksack.svg?theme=shields.io" alt="Dependency Status" /></a>
 </p>
 
-<br/>
-
 A little bag of CSS superpowers, built on [PostCSS][postcss].
 
 Rucksack makes CSS development less painful, with the features and shortcuts it should have come with out of the box.
 
-Made with &#9829; by the folks at [Simpla][simpla].
-
-**Read the full docs at http://simplaio.github.io/rucksack**
+**Read the full docs at [simplaio.github.io](https://simplaio.github.io/rucksack)**
+
+### Contents
+
+- [Install](#install)
+- [Usage](#usage)
+  - [Gulp](#gulp)
+  - [Grunt](#grunt)
+  - [Broccoli](#broccoli)
+  - [CLI](#cli)
+  - [PostCSS](#postcss)
+  - [Stylus](#stylus)
+- [Features](#features)
+  - [Responsive typography](#responsive-typography)
+  - [Shorthand positioning syntax](#shorthand-positioning-syntax)
+  - [Native clearfix](#native-clearfix)
+  - [Automatic font src generation](#automatic-font-src-generation)
+  - [Extra input pseudo-elements](#extra-input-pseudo-elements)
+  - [Hex shortcuts for RGBA](#hex-shortcuts-for-rgba)
+  - [More easing functions](#more-easing-functions)
+  - [Quantity pseudo-selectors](#quantity-pseudo-selectors)
+  - [CSS property aliases](#css-property-aliases)
+- [Addons](#addons)
+  - [Autoprefixer](#autoprefixer)
+  - [Legacy Fallbacks](#legacy-fallbacks)
+- [Options](#options)
+
+
+## Install
+
+Rucksack is available on NPM under `rucksack-css`, install it with Yarn or NPM
 
---
+```sh
+$ yarn add rucksack-css --dev
+```
 
-### Install
 
 ```sh
-$ npm install --save rucksack-css
+$ npm i rucksack-css --save-dev
 ```
 
-<br/>
+## Usage
 
-### Usage
+Rucksack can be used as a PostCSS plugin, direclty on the command line, and has helpers available for most build tools. 
 
 #### Gulp
+
 Use [gulp-rucksack][gulp-rucksack]
 
 ```js
-var gulp = require('gulp');
-var rucksack = require('gulp-rucksack');
+const gulp = require('gulp');
+const rucksack = require('gulp-rucksack');
 
-gulp.task('rucksack', function() {
+gulp.task('rucksack', () => {
   return gulp.src('src/style.css')
     .pipe(rucksack())
     .pipe(gulp.dest('style.css'));
 });
 ```
 
 #### Grunt
+
 Use [grunt-rucksack][grunt-rucksack]
 
 ```js
@@ -64,37 +93,43 @@ grunt.registerTask('default', ['rucksack']);
 ```
 
 #### Broccoli
+
 Use [broccoli-rucksack][broccoli-rucksack]
 
 ```js
-var rucksack = require('broccoli-rucksack');
+const rucksack = require('broccoli-rucksack');
+
 tree = rucksack(tree, [options]);
 ```
 
 #### CLI
+
 Process CSS directly on the command line
 
 ```sh
 $ rucksack src/style.css style.css [options]
 ```
 
 #### PostCSS
-Rucksack is built on PostCSS, and can be used as a PostCSS plugin.
+
+Rucksack is built on PostCSS, and can be used as a PostCSS plugin
 
 ```js
-var postcss = require('postcss'),
-    rucksack = require('rucksack-css');
+const postcss = require('postcss');
+const rucksack = require('rucksack-css');
 
 postcss([ rucksack() ])
   .process(css, { from: 'src/style.css', to: 'style.css' })
-  .then(function (result) {
+  .then(result => {
       fs.writeFileSync('style.css', result.css);
       if ( result.map ) fs.writeFileSync('style.css.map', result.map);
   });
 ```
- See the [PostCSS Docs][postcss] for examples for your environment.
+
+See the [PostCSS Docs][postcss] for examples for your environment.
 
 #### Stylus
+
 Rucksack can be used as a Stylus plugin with [PostStylus][poststylus]
 
 ```js
@@ -103,63 +138,85 @@ stylus(css).use(poststylus('rucksack-css'))
 
 See the [PostStylus Docs][poststylus] for more examples for your environment.
 
---
+## Features
 
-### Core Features
+#### Responsive typography
+
+Automagical fluid typography with new `responsive` arguments to `font-size`, `line-height`, and `letter-spacing` properties
 
-_Automagical responsive typography_
 ```css
 .foo {
   font-size: responsive;
 }
 ```
+
 ![Responsive Type Demo][type-demo]
 
+#### Shorthand positioning syntax
+
+Use the shorthand syntax from `margin` and `padding` on `position` properties
 
-_Shorthand syntax for positioning properties_
 ```css
 .foo {
   position: absolute 0 20px;
 }
 ```
 
-_Native clearfix_
+#### Native clearfix
+
+Generate bulletproof clearfixes with a new argument on the `clear` property
+
 ```css
 .foo {
   clear: fix;
 }
 ```
 
-_Input pseudo-elements_
+#### Automatic font src generation
+
+Automatically generate `src` sets for `@font-face` based on the path to your font files
+
+```css
+@font-face {
+  font-family: 'My Font';
+  font-path: '/path/to/font/file';
+}
+```
+
+#### Extra input pseudo-elements
+
+Standardize the unweidly `<input type="range">` element across browsers with new `::track` and `::thumb` pseudo elements
+
 ```css
 input[type="range"]::track {
   height: 2px;
 }
 ```
 
-_Hex shortcuts for RGBA_
+#### Hex shortcuts for RGBA
+
+Generate RGBA colors from a hex color + alpha value
+
 ```css
 .foo {
   color: rgba(#fff, 0.8);
 }
 ```
 
-_Shorthand `@font-face` src sets (becomes [FontSpring syntax][fontspring])_
-```css
-@font-face {
-  font-family: 'My Font';
-  font-path: '/path/to/font/file';
-}
-```
+#### More easing functions
+
+Use a whole library of modern easing functions in transitions and animations
 
-_Whole library of modern easing functions_
 ```css
 .foo {
   transition: all 250ms ease-out-cubic;
 }
 ```
 
-_Powerful quantity pseudo-selectors_
+#### Quantity pseudo-selectors
+
+Create truly responsive designs with powerful content quantity selectors
+
 ```css
 li:at-least(4) {
   color: blue;
@@ -170,7 +227,8 @@ li:between(4,6) {
 }
 ```
 
-_CSS property aliases_
+#### CSS property aliases
+
 ```css
 @alias {
   fs: font-size;
@@ -183,89 +241,48 @@ _CSS property aliases_
 }
 ```
 
---
+## Addons
 
-### Optional Extras
-
-#### Autoprefixing
-Automatically apply vendor prefixes to relevant properties based on data from [CanIUse][caniuse] - via [autoprefixer][autoprefixer].
+#### Autoprefixer
 
+Automatically apply vendor prefixes to relevant properties based on data from [CanIUse][caniuse], via [autoprefixer][autoprefixer].
 
 #### Legacy Fallbacks
-Automatically insert legacy fallbacks for modern properties - via [laggard][laggard].
-```css
-/* before */
-.foo {
-  color: rgba(0,0,0,0.8);
-  width: 50vmin;
-}
-
-.foo::before{
-  opacity: 0.8;
-}
-
-/* after */
-.foo {
-  color: rgb(0,0,0);
-  color: rgba(0,0,0,0.8);
-  width: 50vm;
-  width: 50vmin;
-}
-
-.foo:before{
-  opacity: 0.8;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-}
-```
-
---
-
-**Read the full docs at http://simplaio.github.io/rucksack**
 
---
+Automatically generate CSS fallbacks for legacy browsers, via [laggard][laggard].
 
-### Options
-All features in Rucksack can be toggled on or off by passing options on initialization. By default all core features are set to `true`, and optional
-addons are set to `false`.
+## Options
 
-Core features (default to `true`):
-- `responsiveType`
-- `shorthandPosition`
-- `quantityQueries`
-- `alias`
-- `inputPseudo`
-- `clearFix`
-- `fontPath`
-- `hexRGBA`
-- `easings`
+All features in Rucksack can be toggled by passing options on initialization. By default core features are set to `true`, and optional
+addons are set to `false`
 
-Addons (default to `false`):
-- `fallbacks`
-- `autoprefixer`
+Option              | Type    | Default | Description                                                         
+------------------- | ------- | ------- | -----------
+`responsiveType`    | Boolean | `true`  | Whether to enable responsive typography                             
+`shorthandPosition` | Boolean | `true`  | Whether to enable shorthand position properties                     
+`quantityQueries`   | Boolean | `true`  | Whether to enable quantity query psuedo selectors                   
+`alias`             | Boolean | `true`  | Whether to enable to enable property aliases                        
+`inputPseudo`       | Boolean | `true`  | Whether to enable whether to enable extra input pseudo elements     
+`clearFix`          | Boolean | `true`  | Whether to enable native clear fix                                  
+`fontPath`          | Boolean | `true`  | Whether to enable font `src` set generation                         
+`hexRGBA`           | Boolean | `true`  | Whether to enable hex RGBA shortcuts                                
+`easings`           | Boolean | `true`  | Whether to enable extra easing functions                            
+`fallbacks`         | Boolean | `false` | Whether to enable CSS fallbacks addon                               
+`autoprefixer`      | Boolean | `false` | Whether to enable autoprefixer addon                                
+`reporter`          | Boolean | `false` | Whether to enable error reporting from plugins used inside Rucksack 
 
-#### Error reporting
-Enable reporting, which outputs helpful error and warning messages from the plugins used inside Rucksack to your console, with the `reporter` option. Defaults to `false`.
-
-```js
-// Set in build tool, etc.
-.rucksack({
-  // options
-})
-```
---
 
-### License
+***
 
-MIT © [Simpla][simpla]
+MIT © [Sean King][sean]
 
-[simpla]: http://simpla.io
 [postcss]: https://github.com/postcss/postcss
 [gulp-rucksack]: https://github.com/simplaio/gulp-rucksack
 [grunt-rucksack]: https://github.com/simplaio/grunt-rucksack
 [broccoli-rucksack]: https://github.com/simplaio/broccoli-rucksack
 [poststylus]: https://github.com/seaneking/poststylus
 [type-demo]: http://simplaio.github.io/rucksack/img/type-demo.gif
-[fontspring]: http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/
 [caniuse]: http://caniuse.com
 [autoprefixer]: https://github.com/postcss/autoprefixer
 [laggard]: https://github.com/seaneking/laggard
+[sean]: https://twitter.com/seaneking