updated README.md

Author: derek-duncan

README.md

@@ -1,2 +1,48 @@
 # postcss-responsify
-[PostCSS](https://github.com/postcss/postcss) plugin to create responsive classes for all styles within a `@responsive {}` rule.
+[PostCSS](https://github.com/postcss/postcss) plugin to create responsive classes with the `@responsive` rule.
+
+```javascript
+const postcss = require('postcss');
+const responsify = require('postcss-responsify');
+
+const breakpoints = [
+  { prefix: 'sm-', mediaQuery: '(min-width: 40em)' },
+  { prefix: 'md-', mediaQuery: '(min-width: 52em)' },
+]
+postcss()
+  .use(responsify()({
+    breakpoints
+  }));
+```
+
+**PostCSS**
+```css
+@responsive {
+  .col { float: left; box-sizing: border-box; }
+  .col-1 { width: calc(1/12 * 100%); }
+  .col-2 { width: calc(2/12 * 100%); }
+  .col-3 { width: calc(2/12 * 100%); }
+}
+```
+
+**CSS**
+```css
+.col { float: left; box-sizing: border-box; }
+.col-1 { width: calc(1/12 * 100%); }
+.col-2 { width: calc(2/12 * 100%); }
+.col-3 { width: calc(2/12 * 100%); }
+
+@media (min-width: 40em) {
+  .sm-col { float: left; box-sizing: border-box; }
+  .sm-col-1 { width: calc(1/12 * 100%); }
+  .sm-col-2 { width: calc(2/12 * 100%); }
+  .sm-col-3 { width: calc(2/12 * 100%); }
+}
+
+@media (min-width: 52em) {
+  .md-col { float: left; box-sizing: border-box; }
+  .md-col-1 { width: calc(1/12 * 100%); }
+  .md-col-2 { width: calc(2/12 * 100%); }
+  .md-col-3 { width: calc(2/12 * 100%); }
+}
+```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "postcss-responsify",
   "version": "1.0.0",
-  "description": "Easily create responsive classes",
+  "description": "PostCSS plugin to automatically create responsive classes with at-rules",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"