📝

jillix · May 27, 2015 · 0b86adc · 0b86adc
1 parent a27dbcc
commit 0b86adc
Showing 1 changed file with 50 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,9 +1,58 @@
+[![Piklor.js](http://i.imgur.com/kAqRcrp.png)](http://jillix.github.io/piklor.js)
+
 # piklor.js
 A tiny JavaScript color picker library.
 
-## Usage
+[![](http://i.imgur.com/ncu4FOh.jpg)](http://jillix.github.io/piklor.js)
 
+## Usage
 
+```html
+<script src="path/to/piklor.js"></script>
+<div class="col-lg-6 picker-wrapper">
+    <button class="btn btn-default">Select color</button>
+    <div class="color-picker">
+    </div>
+</div>
+<script>
+window.addEventListener("load", function () {
+    var pk = new Piklor(".color-picker", [
+            "#1abc9c"
+          , "#2ecc71"
+          , "#3498db"
+          , "#9b59b6"
+          , "#34495e"
+          , "#16a085"
+          , "#27ae60"
+          , "#2980b9"
+          , "#8e44ad"
+          , "#2c3e50"
+          , "#f1c40f"
+          , "#e67e22"
+          , "#e74c3c"
+          , "#ecf0f1"
+          , "#95a5a6"
+          , "#f39c12"
+          , "#d35400"
+          , "#c0392b"
+          , "#bdc3c7"
+          , "#7f8c8d"
+        ], {
+            open: ".picker-wrapper .btn"
+        })
+      , wrapperEl = pk.getElm(".picker-wrapper")
+      , header = pk.getElm("header")
+      , footer = pk.getElm("footer")
+      ;
+
+    pk.colorChosen(function (col) {
+        wrapperEl.style.backgroundColor = col;
+        header.style.backgroundColor = col;
+        footer.style.backgroundColor = col;
+    });
+});
+</script>
+```
 
 ## Documentation
 ### `Piklor(sel, colors, options)`