diff --git a/README.md b/README.md
index 7630456..a2a9cca 100644
--- a/README.md
+++ b/README.md
@@ -2,33 +2,69 @@
# tinyColorPicker and colors
Looking for mobile first, tiny foot print, fast, scaleable, flexible, pluggable and a rich color model...
-This small (4.9KB gZip, 10.8KB minified, no HTML, images or css needed) HSB colorpicker is based on a subset of [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from it's big brother [colorPicker](https://github.com/PitPik/colorPicker/) for a precise and rich color model, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins.
-
-tinyColorPicker now supports AMD / CommonJS and bower.
+This small (5.07KB gZip, 11.39KB minified, no extra HTML, images or css needed) HSB colorpicker is based on a subset of [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from it's big brother [colorPicker](https://github.com/PitPik/colorPicker/) for a precise and rich color model, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins or extend the UI.
##Demo
See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)
-All the WCAG 2.0 calculations for readability are also based on opacity levels of all layers.
-Supported color spaces are: rgb, hsv(b), hsl, HEX
+Supports WCAG 2.0 calculations for readability based on opacity levels of multiple layers.
+Supported color spaces are: rgb, hsv(b), hsl, HEX.
+CMYK, CMY, Lab and XYZ and more standards are supported if using [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from [github.com/PitPik/colorPicker](https://github.com/PitPik/colorPicker/)
## Usage
```javascript
+```
+```jqColorPicker.min.js``` holds all necessary data such as HTML, CSS and images in one file to run tinyColorPicker. So, it is not needed to include anything else than this single file.
+If you need to debug things for development, you can also use ```colors.js```, the color calculation module, and ```jqColorPicker.js```, the UI and interaction module seperately.
+```javascript
+
+
+
```
## AMD / CommonJS wrapper
-tinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)).
+tinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)) in both, the minified version and the single fies (```colors.js``` and ```jqColorPicker.js```).
+
+```javascript
+// example for requirejs configuration
+requirejs.config({
+ baseUrl: 'scripts',
+ paths: {
+ jquery: 'lib/jquery-2.2.1.min'
+ },
+ shim: {
+ 'colorPicker': {
+ deps: [ 'jquery' ],
+ exports: 'jQuery.fn.colorPicker'
+ }
+ }
+});
-## bower support
-tinyColorPicker can be received by bower:
+// then use tinyColorPicker in your module...
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery', 'jqColorPicker'], function (jQuery) {
+ return factory(root, jQuery);
+ });
+ } else {
+ factory(root, root.jQuery);
+ }
+}(this, function(window, $){
+ $('.color').colorPicker(options);
+}));
+```
+
+## Bower support
+tinyColorPicker can be received via bower:
```javascript
bower install tinyColorPicker
@@ -36,24 +72,35 @@ bower install tinyColorPicker
## jqColorPicker.js
-colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
+```jqColorPicker.js``` is a jQuery plugin including the UI, CSS and images and uses an instance of Colors (from ```colors.js```) for all the color calculations. It passes the options to that instance, so some values might be the same when inspecting...
```javascript
$('.color').colorPicker({
- color: ..., // see Colors...
- customBG: '#FFF' // see Colors...
+ color: ..., // see Colors below...
+ customBG: '#FFF' // see Colors below...
animationSpeed: 150, // toggle animation speed
- GPU: true, // use transform: translate3d
- doRender: true | 'selector', // manipulate color and bgColor of input field (on certain elements if selector)
+ GPU: true, // use transform: translate3d or regular rendereing (top, left)
+ doRender: true | 'selector', // render color and bgColor of input field (on certain elements if selector)
opacity: true, // enable / disable alpha slider
- renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move
- // toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,...
- buildCallback: function($elm) {}, // this === instance; $elm: the UI
- positionCallback: function($elm) {return {top: y, left: x}}, // this === instance; $elm: the trigger element;
- css: '', // replaces existing css
- cssAddon: '', // adds css to existing
+ buildCallback: function($elm) {
+ // 'this': colorPicker instance; // will be the same as in positionCallback() and renderCallback();
+ // $elm: the UI (
This is a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.