doc: update README

Author: andreypopp

README.md

@@ -10,11 +10,9 @@
 - [Motivation](#motivation)
 - [Installation & Usage](#installation-&-usage)
 - [Base components](#base-components)
-  - [DOM components](#dom-components)
-  - [Composite components](#composite-components)
+- [Custom composite components as bases](#custom-composite-components-as-bases)
 - [Variants](#variants)
-  - [Named variants](#named-variants)
-  - [Variants controlled with JS expression](#variants-controlled-with-js-expression)
+- [Prop variants](#prop-variants)
 - [TODO](#todo)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -67,7 +65,7 @@ And consume them like regular React components:
 ```js
 import {Label} from './styles.react.css'
 
-<Label /> // => <div className="<autogenerated classname>">...</div>
+<Label /> // => <div class="<autogenerated classname>">...</div>
 ```
 
 ## Base components
@@ -84,6 +82,14 @@ FancyButton {
 }
 ```
 
+Now `<FancyButton />` renders into `<button />`:
+
+```js
+import {FancyButton} from './styles.react.css'
+
+<FancyButton /> // => <button class="<autogenerated classname>">...</button>
+```
+
 ### Composite components
 
 In fact any React components which accepts `className` props can be used as a
@@ -106,6 +112,7 @@ Variants is a mechanism which allows to define styling variants for a component.
 ### Named variants
 
 You can define additional styling variants for your components:
+
 ```css
 Label {
   color: red;
@@ -118,6 +125,7 @@ Label:emphasis {
 
 They are compiled as CSS classes which then can be controlled from JS via
 `variant` prop:
+
 ```js
 <Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight`
 ```