feat(Docs): Set up documentations based on Jekyll

Closes #2

.editorconfig..editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

Gruntfile.js

@@ -1,4 +1,9 @@
 module.exports = function (grunt) {
+  // show elapsed time at the end
+  require('time-grunt')(grunt);
+
+  // load plugins
+  require('load-grunt-tasks')(grunt);
 
   grunt.initConfig({
     // Project configuration.
@@ -11,7 +16,7 @@ module.exports = function (grunt) {
       },
       dist: {
         files: {
-          'dist/css/active.css': 'lesss/active.less'
+          'dist/css/active.css': 'less/active.less'
         }
       },
       docs: {
@@ -31,7 +36,7 @@ module.exports = function (grunt) {
         ]
       },
       dist: {
-        src: 'css/*.css'
+        src: 'dist/css/*.css'
       },
       docs: {
         src: '_site/*.css'
@@ -58,7 +63,7 @@ module.exports = function (grunt) {
           'TotalImportantKeywords',
           'TotalMediaQueries'
         ],
-        file: "dist/.active-stats.md",
+        file: "dist/.css-stats.md",
         usePackage: true
       },
       src: [
@@ -112,14 +117,6 @@ module.exports = function (grunt) {
     }
   });
 
-  // Load dependencies
-  grunt.loadNpmTasks('grunt-postcss');
-  grunt.loadNpmTasks('grunt-build-control');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-jekyll');
-  grunt.loadNpmTasks('grunt-parker');
-  grunt.loadNpmTasks('grunt-contrib-less');
-
   // Generate and format the CSS
   grunt.registerTask('default', ['less', 'jekyll:dist', 'postcss', 'parker']);
 

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Xin(Khalil) Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -3,22 +3,111 @@
 ## Status
 
 [![Travis Build Status](https://img.shields.io/travis/starandtina/active-share-styles.svg?style=flat-square)](https://travis-ci.org/starandtina/active-share-styles)
-[![Codecov Coverage](https://img.shields.io/codecov/c/github/starandtina/active-share-styles.svg?style=flat-square)](https://codecov.io/github/starandtina/active-share-styles)
 [![npm version](https://img.shields.io/npm/v/active-share-styles.svg?style=flat-square)](https://www.npmjs.com/package/active-share-styles)
 [![MIT License](https://img.shields.io/npm/l/active-share-styles.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 
+## Contents
+
+- [Install](#install)
+- [Usage](#usage)
+- [Documentation](#documentation)
+  - [Dependencies](#dependencies)
+  - [Running locally](#running-locally)
+  - [Publishing](#publishing)
+  - [CSS stats](#css-stats)
+- [Versioning](#versioning)
+- [License](#license)
+- [Example](#example)
+
 ## Build
 
-```
+```bash
 npm run compile
 ```
 
 ## Install
 
+```bash
+npm i -S active-share-styles
 ```
-npm i active-share-styles
+
+### Manually
+
+Download the [latest release](https://github.com/starandtina/active-share-styles/releases/latest) and copy the LESS files over to your own project. Once your files are in place, jump to the [usage guidelines](#usage) for including styles into your own CSS.
+
+## Usage
+
+Once included, simply `@import` either the master LESS file, or the individual files as you need them.
+
+```less
+// Example: All of Styles
+@import "active-share-styles/less/active";
+
+// Example: Individual files
+@import "active-share-styles/less/base/variables";
+@import "active-share-styles/less/base/font";
+@import "active-share-styles/less/base/utility";
 ```
 
+## Documentations
+
+The documentation is built with Jekyll and published to `http://starandtina.github.io/active-share-styles` via the `gh-pages` branch.
+
+
+### Dependencies
+
+You'll need the following installed:
+
+- Latest Jekyll: `gem install jekyll`
+- Latest Rouge: `gem install rouge`
+- Latest LESS: `gem install less`
+- Latest Grunt CLI: `npm install -g grunt-cli`
+- [Node.js and npm](http://nodejs.org/download/)
+
+Chances are you have all this already if you work on `github/github` or similar projects. If you have all those set up, now you can install the dependencies:
+
+```bash
+npm i
+```
+
+### Running locally
+
+From the Terminal, start a local Jekyll server:
+
+```bash
+jekyll s
+```
+
+Open a second Terminal tab to automatically recompile the LESS files, run autoprefixer, and update our [CSS stats file](#css-stats):
+
+```bash
+grunt watch
+```
+
+Alternatively, you can manually run `grunt` and `jekyll serve` when needed.
+
+### Publishing
+
+Use the included Grunt task to generate and publish docs to the `gh-pages` branch.
+
+```bash
+grunt publish
+```
+
+This takes the `_site` directory, generates it's own Git repository there, and publishes the contents to the `gh-pages` branch here on GitHub. Changes are reflected in the hosted docs within a minute or so.
+
+### CSS stats
+
+When compiling or watching the LESS files, Grunt will automatically generate a `.css-stats.md` file. This is tracked in the Git repository to provide us historical and contextual information on the changes we introduce. For example, we'll know when the number of selectors or declarations rises sharply within a single change.
+
+## Versioning
+
+For transparency into our release cycle and in striving to maintain backward compatibility, it is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
+
+## License
+
+[MIT license](LICENSE).
+
 ## Example
 
 See [starandtina/active-share-styles-example](https://github.com/starandtina/active-share-styles-example)

dist/.active-stats.md → dist/.css-stats.md

@@ -5,17 +5,17 @@
 ### dist/css/active.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 36974
+- **Total Stylesheet Size:** 31833
 - **Total Media Queries:** 5
 - **Total Rules:** 254
 - **Selectors Per Rule:** 1.295275590551181
 - **Total Selectors:** 329
 - **Identifiers Per Selector:** 2.7264437689969605
-- **Specificity Per Selector:** 18.76595744680851
+- **Specificity Per Selector:** 18.753799392097264
 - **Top Selector Specificity:** 71
-- **Top Selector Specificity Selector:** .btn-group.open .select.dropdown-toggle > span.glyphicon.glyphicon-chevron-toggle:after
+- **Top Selector Specificity Selector:** .btn-group.open .select.dropdown-toggle>span.glyphicon.glyphicon-chevron-toggle:after
 - **Total Id Selectors:** 0
-- **Total Identifiers:** 779
-- **Total Declarations:** 810
+- **Total Identifiers:** 771
+- **Total Declarations:** 792
 - **Total Unique Colors:** 35
 - **Total Important Keywords:** 5