package 0.0.1

.gitignore

@@ -28,3 +28,4 @@ node_modules
 .lock-wscript
 
 .sass-cache
+bower_components

CHANGELOG.md

@@ -0,0 +1,9 @@
+# 0.0.1
+
+2014-11-10
+
+ - stylus implementation
+ - sass implementation
+ - less implementation
+ - css implementation
+ - js implementation

README.md

@@ -1,41 +1,107 @@
 # google-material-color
 
-[Google material color](http://www.google.com/design/spec/style/color.html) port for SASS, LESS, Stylus, CSS and JS.
+[Google material color](http://www.google.com/design/spec/style/color.html) implementation for Sass, Less, Stylus, CSS and JS.
 
 > 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.
+See the [demo](http://danlevan.github.io/google-material-color/test/) 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)
+* Download the files you need from the [dist](dist) directory:
+  * Stylus:  [palette.styl](http://danlevan.github.io/google-material-color/dist/palette.styl)
+  * Less:  [palette.less](http://danlevan.github.io/google-material-color/dist/palette.less)
+  * Sass (SCSS) 3.3+:  [palette.scss](http://danlevan.github.io/google-material-color/dist/palette.scss)
+  * CSS:  [palette.css](http://danlevan.github.io/google-material-color/dist/palette.css)
+  * JS:  [palette.js](http://danlevan.github.io/google-material-color/dist/palette.js) supports (AMD, node, browser)
 * 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`
 
+## Colors
 
-## Usage
+Details can be found on the [google design specs website](http://www.google.com/design/spec/style/color.html#color-color-palette).
 
-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):
+**Colors**
+> Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey
 
-`color`
+**Shades** (note that not all color have all the shades)
+> 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, A100, A200, A400, A700
 
-    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`
+## Getting started
 
-### css
+### Stylus
+
+Import [palette.styl](http://danlevan.github.io/google-material-color/dist/palette.styl) and call the function `palette('[color]', '[shade]')` in your styl file.
+
+> The shade is optional (500 is the default shade).
+
+`example.styl`
+
+    @import 'palette'
+    ...
+
+    .my-div
+      background-color palette('Light Blue', '700')
+      color palette('Red') // default shade is 500
+
+> If you need direct access to the variables, you can access it like `$palette['Light Blue']['500']`
+
+### Sass (SCSS)
+
+Import [palette.scss](http://danlevan.github.io/google-material-color/dist/palette.scss) and call the function `palette([color], [shade])`.
+
+> The shade is optional (500 is the default shade).
+
+`example.scss`
+
+    @import 'palette';
+    ...
+
+    .my-div {
+      background-color: palette(Light Blue, 700);
+      color: palette(Red); // default shade is 500
+    }
+
+> If you need direct access to the variables, you can access it through a map like `$colorMap: map-get($palette, Light Blue); $color: map-get($colorMap, 700);`.
+
+### Less
 
-The css class follows the pattern `palette-[color]-[shade]` where spaces are replaced by `-`. e.g. `palette-Light-Blue-700`
+Import [palette.less](http://danlevan.github.io/google-material-color/dist/palette.less) and call the mixin `.palette([color], [shade])`.
+
+> The shade is optional (500 is the default shade).
+
+`example.scss`
+
+    @import 'palette';
+    ...
+
+    .my-div {
+      .palette('Light Blue', '700');
+      background-color: @palette;
+
+      .palette('Red'); // default shade is 500
+      color: @palette;
+    }
+
+If you need access to the variables, you can access it through variablec like `@palette-Light-Blue-500`
+
+
+### CSS
+
+Include [palette.css](http://danlevan.github.io/google-material-color/dist/palette.css) in your html. The CSS class follows the pattern `palette-[color]-[shade]` (spaces replaced by `-`).
+
+The CSS provides colors for the background and text
+* `background-color`: by adding the `bg` class to the element
+* `color`: by adding the `text` class to the element
+
+`example.html`
 
     <link href='palette.css' rel='stylesheet' type='text/css'>
     ...
+
     <div class="palette-Light-Blue-700 bg">
       The background is Light Blue
     </div>
@@ -44,26 +110,27 @@ The css class follows the pattern `palette-[color]-[shade]` where spaces are rep
       The text is Light Blue
     </div>
 
-### Stylus
-
-Call the function `palette('[color]', '[shade]')`. The shade is optional (500 is the default shade).
+### JS
 
-`example.styl`
+You can import the [palette.js](http://danlevan.github.io/google-material-color/dist/palette.js) file in Node.js, and AMD module or the browser.
 
-    @import 'palette'
+`example.html`
 
-    div
-      background-color palette('Light Blue') // default to shade 500
+    <script src='../dist/palette.js'></script>
+    ...
 
-    div
-      background-color palette('Light Blue', '700')
+    <script>
+      document.getElementById('my-div')
+        .style['background-color'] = palette.get('Light Blue', '700');
+    </script>
 
-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].
 
+If you would like to suggest improvements or other libraries, you can also open an issue.
+
 ## Release History
 See the [changelog](CHANGELOG.md)
 

bower.json

@@ -5,11 +5,15 @@
   "authors": [
     "Dan Le Van <[email protected]>"
   ],
-  "description": "Google material color (http://www.google.com/design/spec/style/color.html) for SASS, LESS, Stylus, CSS, JS.",
+  "description": "Google material color (http://www.google.com/design/spec/style/color.html) implementation for Sass, Less, Stylus, CSS and JS.",
   "main": "dist",
   "keywords": [
     "google",
-    "color"
+    "color",
+    "sass",
+    "less",
+    "stylus",
+    "css"
   ],
   "license": "MIT",
   "ignore": [