basic working version

Author: gmsa

README.md

@@ -43,10 +43,80 @@ vue-grid-layout is a grid layout system, like [Gridster](http://gridster.net), f
 
 ## Installation
 
+Install the vue-grid-layout [package](https://www.npmjs.org/package/vue-grid-layout) package using [npm](https://www.npmjs.com/):
+
+	npm install react-grid-layout
 
 
 ## Usage
 
+npm install react-grid-layout
+
+```javascript
+
+	var testLayout = [
+	    {"x":0,"y":0,"w":2,"h":2,"i":"0"},
+	    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
+	    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
+	    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
+	    {"x":8,"y":0,"w":2,"h":3,"i":"4"},
+	    {"x":10,"y":0,"w":2,"h":3,"i":"5"},
+	    {"x":0,"y":5,"w":2,"h":5,"i":"6"},
+	    {"x":2,"y":5,"w":2,"h":5,"i":"7"},
+	    {"x":4,"y":5,"w":2,"h":5,"i":"8"},
+	    {"x":6,"y":4,"w":2,"h":4,"i":"9"},
+	    {"x":8,"y":4,"w":2,"h":4,"i":"10"},
+	    {"x":10,"y":4,"w":2,"h":4,"i":"11"},
+	    {"x":0,"y":10,"w":2,"h":5,"i":"12"},
+	    {"x":2,"y":10,"w":2,"h":5,"i":"13"},
+	    {"x":4,"y":8,"w":2,"h":4,"i":"14"},
+	    {"x":6,"y":8,"w":2,"h":4,"i":"15"},
+	    {"x":8,"y":10,"w":2,"h":5,"i":"16"},
+	    {"x":10,"y":4,"w":2,"h":2,"i":"17"},
+	    {"x":0,"y":9,"w":2,"h":3,"i":"18"},
+	    {"x":2,"y":6,"w":2,"h":2,"i":"19"}
+	];
+	
+	var GridLayout = VueGridLayout.GridLayout;
+	var GridItem = VueGridLayout.GridItem;
+	
+	new Vue({
+	    el: '#app',
+	    components: {
+	        GridLayout,
+	        GridItem,
+	    },
+	    data: {
+	        layout: testLayout,
+	    },
+	});
+```` 
+
+
+````html
+
+    <grid-layout
+            :layout.sync="layout"
+            :col-num="12"
+            :row-height="30"
+            :is-draggable="true"
+            :is-resizable="true"
+            :vertical-compact="true"
+            :margin="[10, 10]"
+            :use-css-transforms="true"
+    >
+
+        <grid-item v-for="item in layout"
+                   :x.sync="item.x"
+                   :y.sync="item.y"
+                   :w.sync="item.w"
+                   :h.sync="item.h"
+                   :i="item.i">
+            {{item.i}}
+        </grid-item>
+    </grid-layout>
+```` 
+
 
 ## Contribute
 

index.html

@@ -26,15 +26,24 @@ <h1>Vue Grid Layout</h1>
             <button @click="increaseWidth">Increase Width</button>
             <button @click="addItem">Add an item</button>
             <br/>
-            <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :vertical-compact="true">
+            <grid-layout
+                    :layout.sync="layout"
+                    :col-num="12"
+                    :row-height="30"
+                    :is-draggable="true"
+                    :is-resizable="true"
+                    :vertical-compact="true"
+                    :margin="[10, 10]"
+                    :use-css-transforms="true"
+            >
+
                 <grid-item v-for="item in layout"
                            :x.sync="item.x"
                            :y.sync="item.y"
                            :w.sync="item.w"
                            :h.sync="item.h"
-                           :i="item.i"
-                >
-                    <test-element :text="item.i"></test-element>
+                           :i="item.i">
+                    {{item.i}}
                 </grid-item>
             </grid-layout>
         </div>

src/TestElement.vue

@@ -6,8 +6,6 @@
 <style>
 </style>
 <script>
-    var Vue = require('vue');
-
     export default {
         name: "TestElement",
         props: {