Help file

README.md

@@ -1,6 +1,78 @@
-google-material-color
-=====================
+# google-material-color
 
-Google material color for SASS, LESS, Stylus, CSS, JS, etc
+[Google material color](http://www.google.com/design/spec/style/color.html) port for SASS, LESS, Stylus, CSS and JS.
 
-http://www.google.com/design/spec/style/color.html
+> This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
+[(http://www.google.com/design/spec/style/color.html)](http://www.google.com/design/spec/style/color.html).
+
+See the [demo](test/index.html) generated by the tests.
+
+## Installation
+
+* Download the files you need from the [dist](dist) directory
+  * [palette.css](dist/palette.css)
+  * [palette.js](dist/palette.js) supports (AMD, node, browser)
+  * [palette.less](dist/palette.less)
+  * [palette.scss](dist/palette.scss) use maps (sass 3.3+)
+  * [palette.styl](dist/palette.styl)
+* NPM: `npm install google-material-color --save`
+* Bower: `bower install google-material-color --save`
+* Git: `git clone git://github.com/danlevan/google-material-color.git`
+
+
+## Usage
+
+The list of colors and shades as found on the [google design specs website](http://www.google.com/design/spec/style/color.html#color-color-palette):
+
+`color`
+
+    Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey
+
+`shade`
+
+### css
+
+The css class follows the pattern `palette-[color]-[shade]` where spaces are replaced by `-`. e.g. `palette-Light-Blue-700`
+
+    <link href='palette.css' rel='stylesheet' type='text/css'>
+    ...
+    <div class="palette-Light-Blue-700 bg">
+      The background is Light Blue
+    </div>
+
+    <div class="palette-Light-Blue-700 text">
+      The text is Light Blue
+    </div>
+
+### Stylus
+
+Call the function `palette('[color]', '[shade]')`. The shade is optional (500 is the default shade).
+
+`example.styl`
+
+    @import 'palette'
+
+    div
+      background-color palette('Light Blue') // default to shade 500
+
+    div
+      background-color palette('Light Blue', '700')
+
+If you need access to the variables, you can access it through `$palette['[color]']['[shade]']`. e.g. `$palette['Light Blue']['500']`
+
+## Issues
+
+Search or open new issues [here][issues].
+
+## Release History
+See the [changelog](CHANGELOG.md)
+
+## [License](LICENSE)
+
+Licensed under [MIT](LICENSE).
+
+Google material design [Terms](http://www.google.com/design/spec/style/color.html).
+
+
+[issues]: https://github.com/danlevan/google-material-color/issues "GitHub Issues for Less.js"
+[download]: https://github.com/less/less.js/zipball/master "Download Less.js"