Merge pull request #1 from marionebl/docs/expand-usage-documentation

docs(system): add usage documentation

Author: marionebl

license.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 SinnerSchrader Deutschland GmbH and [contributors](./graphs/contributors)
+Copyright (c) 2016 nerdLabs and [contributors](./graphs/contributors)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,6 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
----
-Copyright 2016 by [SinnerSchrader Deutschland GmbH](https://github.com/sinnerschrader) and [contributors](./graphs/contributors). Released under the [MIT license]('./license.md').

readme.md

@@ -1,27 +1,105 @@
 # patternplate-transform-cssmodules
-[patternplate](/sinnerschrader/patternplate) transform to enable usage of [css modules](/css-modules/css-modules).
+
+[patternplate](/sinnerschrader/patternplate)
+transform to enable usage of
+[css modules](https://github.com/css-modules/css-modules).
+
+:warning: **This transform is intended to be used in conjunction with
+ [patternplate-transform-cssmodules-symbols](https://github.com/nerdlabs/patternplate-transform-cssmodules-symbols)
+ to produce markup using the transformed css source**
+
+See the [Configuration](#configuration) section for details.
 
 ## Installation
+
 ```shell
-npm install --save patternplate-transform-cssmodules
+npm install --save patternplate-transform-cssmodules patternplate-transform-cssmodules-symbols
 ```
+
 ## Configuration
+
 ```javascript
 // file: configuration/patternplate-server/patterns.js
 module.exports = {
   formats: {
     css: {
       name: 'Style',
       transforms: ['cssmodules']
+    },
+    jsx: {
+      name: 'Markup',
+      transforms: ['cssmodules-symbols', 'react', 'react-to-markup']
     }
   }
 };
+```
 
+```javascript
 // file: configuration/patternplate-server/transforms.js
 module.exports = {
+  'cssmodules-symbols': {
+    inFormat: 'jsx',
+    outFormat: 'jsx'
+  },
   cssmodules: {
     inFormat: 'css',
     outFormat: 'css'
   }
 };
 ```
+
+## Usage
+
+### Sources
+
+```javascript
+// atoms/button/index.jsx
+import styles from 'style://Pattern';
+import cx from 'classnames';
+
+const className = cx(styles.default, {
+  [styles.disabled]: this.props.disabled
+});
+
+<button className={className}>
+  {this.props.children}
+</button>
+```
+
+```css
+/* atoms/button/index.css */
+.default {
+  padding: 5px 10px;
+  background: blue;
+  color: white;
+}
+.disabled {
+  background: grey;
+}
+```
+
+### Transformed
+
+```javascript
+// <Button>Lorem Ipsum dolor si amnet</Button>
+<button class="_button_4erg9ut2">
+  Lorem Ipsum dolor si amnet
+</button>
+
+// <Button>Lorem Ipsum dolor si amnet</Button>
+<button class="_button_4erg9ut2 _button_iert9832">
+  Lorem Ipsum dolor si amnet
+</button>
+```
+
+```css
+/* atoms/button/index.css */
+._button_4erg9ut2 {
+  padding: 5px 10px;
+  background: blue;
+  color: white;
+}
+._button_iert9832 {
+  background: grey;
+}
+```