Update README.md with usage example (#21)

* Add usage example to README.md * Delete unnecessary changes
developit · Nov 27, 2016 · ad1e19c · ad1e19c
1 parent 807b0ed
commit ad1e19c
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,43 @@ _Here's some live-action demos:_
 <img src="https://i.imgur.com/I6RDmBm.gif" width="122" />
 <img src="https://i.gyazo.com/70724d88b290ff47c793cf6f9ddc13f1.gif" width="107" />
 
+## Usage
+
+* Add MDL stylesheets to your html
+```html 
+<!DOCTYPE html>
+<html style="height: 100%; width: 100%;">
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
+    <title>Preact-mdl Example</title>
+</head>
+<body style="height: 100%; width: 100%;">
+  <script src="/bundle.js"></script>
+</body>
+</html>
+```
+
+* Import mdl module and components from preact-mdl
+
+```JavaScript
+import { h, Component } from 'preact';
+import mdl from 'material-design-lite/material';
+import { Button } from 'preact-mdl';
+
+export default class MyButton extends Component {
+  render() {
+    return(
+      <div>
+        <Button>I am button!</Button>
+      </div>
+    )
+  }
+}
+
+```
 
 ## Documentation