Add comments to example and README

Author: siddharthkp

README.md

@@ -23,12 +23,34 @@ export default class Hello extends React.Component {
     @css`
         font-size: 16px;
         text-align: center;
+
+        /* Use props in your CSS */
         color: {this.props.color};
-        font-family: monospace;
+
+        /* Pseudo selectors */
+        &:hover {
+            color: #FFF;
+        }
+
+        /* Nested elements */
+        img {
+            border-radius: 50%;
+        }
+        #handle {
+            margin-top: 20px;
+        }
+
+        /* Media queries */
+        @media (max-width: 600px) {
+            & {font-size: 18px;}
+        }
     `
 
     render () {
-        return <div>Styled {this.props.color} text!</div>
+        return (<div>
+            <img src="https://github.com/siddharthkp.png"/>
+            <div id="handle">@siddharthkp</div>
+        </div>)
     }
 };
 
@@ -50,21 +72,20 @@ export default class Hello extends React.Component {
 
 👶 Super tiny: only 1.2K gzipped
 
+🌀 pseudo selectors
+
+📱 media queries support
+
+👪 nested css
+
 💄 Offical library emoji
 
 --
 
 *Coming soon*
 
-🌀 pseudo selectors
-
-📱 media queries support
-
 💻 vendor prefixes
 
-👪 nested css
-
-
 --
 
 #### Usage

example/bundle.js

@@ -95,7 +95,7 @@ var _dec, _desc, _value, _class;
 //import css from 'css-constructor';  // production - use this!
 
 
-var _templateObject = _taggedTemplateLiteral(['\n        font-size: 16px;\n        text-align: center;\n        color: {this.props.color};\n        font-family: monospace;\n        &:hover {\n            color: #FFF;\n        }\n        img {\n            border-radius: 50%;\n        }\n        #handle {\n            margin-top: 20px;\n        }\n        @media (max-width: 600px) {\n            & {font-size: 18px;}\n        }\n    '], ['\n        font-size: 16px;\n        text-align: center;\n        color: {this.props.color};\n        font-family: monospace;\n        &:hover {\n            color: #FFF;\n        }\n        img {\n            border-radius: 50%;\n        }\n        #handle {\n            margin-top: 20px;\n        }\n        @media (max-width: 600px) {\n            & {font-size: 18px;}\n        }\n    ']);
+var _templateObject = _taggedTemplateLiteral(['\n        font-size: 16px;\n        text-align: center;\n\n        /* Use props in your CSS */\n        color: {this.props.color};\n\n        /* Pseudo selectors */\n        &:hover {\n            color: #FFF;\n        }\n\n        /* Nested elements */\n        img {\n            border-radius: 50%;\n        }\n        #handle {\n            margin-top: 20px;\n        }\n\n        /* Media queries */\n        @media (max-width: 600px) {\n            & {font-size: 18px;}\n        }\n    '], ['\n        font-size: 16px;\n        text-align: center;\n\n        /* Use props in your CSS */\n        color: {this.props.color};\n\n        /* Pseudo selectors */\n        &:hover {\n            color: #FFF;\n        }\n\n        /* Nested elements */\n        img {\n            border-radius: 50%;\n        }\n        #handle {\n            margin-top: 20px;\n        }\n\n        /* Media queries */\n        @media (max-width: 600px) {\n            & {font-size: 18px;}\n        }\n    ']);
 
 var _react = require('react');
 

example/hello.js

@@ -13,28 +13,33 @@ export default class Hello extends React.Component {
     @css`
         font-size: 16px;
         text-align: center;
+
+        /* Use props in your CSS */
         color: {this.props.color};
-        font-family: monospace;
+
+        /* Pseudo selectors */
         &:hover {
             color: #FFF;
         }
+
+        /* Nested elements */
         img {
             border-radius: 50%;
         }
         #handle {
             margin-top: 20px;
         }
+
+        /* Media queries */
         @media (max-width: 600px) {
             & {font-size: 18px;}
         }
     `
 
     render () {
-        return (
-            <div>
-                <img src="https://github.com/siddharthkp.png"/>
-                <div id="handle">@siddharthkp</div>
-            </div>
-        )
+        return (<div>
+            <img src="https://github.com/siddharthkp.png"/>
+            <div id="handle">@siddharthkp</div>
+        </div>)
     }
 };

example/index.html

@@ -2,6 +2,7 @@
     body {
         background: #20222B;
         color: #FFF;
+        font-family: monospace;
     }
 </style>
 <div id="container"></div>