Merge pull request #102 from mobify/add-csscomb

Add CSSComb doc

Author: Marlow Payne

assets/csscomb.gif

@@ -45,5 +45,8 @@
 * [Sass-Lint](sass-lint/readme.md)
     * [Using Sass-Lint with Atom](sass-lint/readme.md#using-sass-lint-with-atom)
     * [Using Sass-Lint with Sublime Text](sass-lint/readme.md#using-sass-lint-with-sublime-text)
+* [CSSComb](csscomb/readme.md)
+    * [Using CSSComb with Atom](csscomb/readme.md#atom)
+    * [Using CSSComb with Sublime Text](csscomb/readme.md#sublime-text)
 
 Continue on to [the Introduction →](introduction#introduction)

css/Readme.md

@@ -177,7 +177,7 @@ Another benefit is that this keeps our code isolated really well. Action Bar can
 
 We want our CSS to be written consistently no matter who the code author is. In order to do so, please follow these below rules.
 
-Note that we use [SCSS-Lint](https://github.com/causes/scss-lint) to make this easier — see our linting rules [here](https://github.com/mobify/mobify-code-style/blob/update-css-style/css/.scss-lint.yml).
+Note that we use [Sass-Lint](https://github.com/sasstools/sass-lint) to make this easier — see our linting rules [here](https://github.com/mobify/mobify-code-style/blob/develop/css/.sass-lint.yml). Find out how to integrate Sass-Lint with your text editor [here](../sass-lint/readme.md).
 
 * One selector per line
 * Use a soft indent of four spaces
@@ -216,7 +216,7 @@ Note that we use [SCSS-Lint](https://github.com/causes/scss-lint) to make this e
 
 Following our practice of writing consistent code, we also want all properties to be consistently ordered according to the bellow standard.
 
-And as before, we use [SCSS-Lint](https://github.com/causes/scss-lint) to help ensure property order is consistent - see our linting rules [here](https://github.com/mobify/mobify-code-style/blob/update-css-style/css/.scss-lint.yml).
+And as before, we use [Sass-Lint](https://github.com/sasstools/sass-lint) to help ensure property order is consistent - see our linting rules [here](https://github.com/mobify/mobify-code-style/blob/develop/css/.sass-lint.yml).
 
 1. Extends
 1. Mixins/Includes (except for property specific mixins)

css/css-best-practices/readme.md

@@ -0,0 +1,36 @@
+# CSSComb
+
+A [CSS-beautifier utility](http://csscomb.com/) which will ensure that your SCSS is consistent with our [code style](https://github.com/mobify/mobify-code-style/blob/develop/css/.csscomb.json).
+
+![CSSComb in action](../../assets/csscomb.gif "CSSComb in action")
+
+## How to Install CSSComb
+
+### Prerequisites
+* Install Node.js and NPM with NVM as directed in the [Adaptive.js docs](http://adaptivejs.mobify.com/v2.0/docs/install/)
+* Install CSSComb and the Mobify Code Style:
+
+   `npm install -g csscomb mobify-code-style`
+
+### Atom
+1. Install [css-comb package](https://atom.io/packages/css-comb) for Atom (this will allow you to set the global CSSComb config)
+1. Open your Atom package settings for "css-comb" (**not** "csscomb")
+  * Ensure your custom config path is set to your machine's version of `mobify-code-style`: Run `npm config get prefix` and append `/lib/node_modules/mobify-code-style/css/.csscomb.json` to the result
+  * Ensure Disable config searching is unchecked
+1. Restart Atom
+1. Start combing your Sass!
+
+### Sublime Text
+
+Before you start, make sure you have [Package Control](https://packagecontrol.io/installation) installed for Sublime Text.
+
+1. Install [CSSComb for Sublime](https://packagecontrol.io/packages/CSScomb) (Search for "CSScomb" in Sublime's Package Control)
+1. CSSComb for Sublime will look for your config in your HOME directory, so make a symlink to the Mobify Code Style version (this way, updating the code style through NPM will automagically update the config for Sublime):
+
+  ```bash
+  cd ~
+  ln -s /path/to/your/local/node_modules/mobify-code-style/css/.csscomb.json ./.csscomb.json
+  ```
+  (Find your local path by running `npm config get prefix` and append `/lib/node_modules/mobify-code-style/css/.csscomb.json` to the result)
+1. Restart Sublime
+1. Start combing your Sass!

css/csscomb/readme.md

@@ -19,7 +19,7 @@ We follow a mixture of various methodologies include, but not limited to: SMACSS
 * [Spline](https://github.com/mobify/spline) is our library of Sass mixins and functions
 * [Stencil](https://github.com/mobify/stencil) (Deprecated – but a new 2.0 version is coming soon!) is our library or reusable UI patterns
 * [Sass-Lint](https://github.com/sasstools/sass-lint) is our preferred linter for `SCSS`. Our custom linting rules are found [here](https://github.com/mobify/mobify-code-style/blob/master/css/.sass-lint.yml)). Find out how to integrate Sass-Lint with your text editor [here](../sass-lint/readme.md).
-* [CSScomb](http://csscomb.com/) is a tool that can be plugged into most popular text editors that automatically formats your code! Our formatting ruleset can be found [here](https://github.com/mobify/mobify-code-style/blob/master/css/.csscomb.json)
+* [CSScomb](http://csscomb.com/) is a tool that can be plugged into most popular text editors that automatically formats your code! Our formatting ruleset can be found [here](https://github.com/mobify/mobify-code-style/blob/master/css/.csscomb.json). Find out how to integrate CSSComb with your text editor [here](../csscomb/readme.md).
 
 
 ## Philosophy & Structure