adding instructions for basic form controls usage

Author: tilwinjoy

css/index.css

@@ -19,3 +19,7 @@ form {
   border-radius: 4px;
   background-color: #fff;
 }
+.description{
+  margin-top:20px;
+  padding: 20px;
+}

index.html

@@ -42,7 +42,7 @@
       </div>
       <div id="navbar" class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
-          <li class="active"><a href="#">Getting started</a></li>
+          <li><a href="#">Getting started</a></li>
           <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a>
             <ul class="dropdown-menu">
@@ -61,7 +61,7 @@
         <ul class="nav navbar-nav navbar-right">
           <li><a href="http://github.com/tilwinjoy/angular-bootstrap-material">View on GitHub</a></li>
           <li><a href="http://github.com/tilwinjoy/angular-bootstrap-material/zipball/master">Download .zip</a></li>
-          <li class="active"><a href="http://github.com/tilwinjoy/angular-bootstrap-material/tarball/master">Download .tar.gz</a></li>
+          <li><a href="http://github.com/tilwinjoy/angular-bootstrap-material/tarball/master">Download .tar.gz</a></li>
         </ul>
       </div>
       <!--/.nav-collapse -->
@@ -112,7 +112,15 @@ <h5>Folating Labels</h5>
           </abm-form-group>
         </form>
       </div>
-      <div class="col-xs-6"></div>
+      <div class="col-xs-6 description">
+        <p>Create a material design input by adding <code>abmFormControl</code> directive to an <code>input</code> element and wrapping it in <code>abmFormGroup</code> directive.</p>
+        
+        <p>If the <code>input</code> is accompanied by a label, it should contain <code>abmLabel</code> directive.
+        The behaviour of label can be controlled by adding a <code>type</code> attribute whos value can be either "floating" or "static"(default)</p>
+        <p>
+          You can control the size of the component by adding the classes "form-group-sm" or "form-group-lg" on the <code>abmFormGroup</code> directive.
+        </p>
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-6">
@@ -124,7 +132,9 @@ <h4><a href="#input">Textarea</a></h4>
           </abm-form-group>
         </form>
       </div>
-      <div class="col-xs-6"></div>
+      <div class="col-xs-6 description">
+        <p>Creating a material design textarea the same as creating an input, except that <code>abmFormControl</code> directive should be added to a <code>textarea</code> element.
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-6">
@@ -146,10 +156,13 @@ <h4><a href="#checkbox">Checkbox</a></h4>
           <div class="checkbox" abm-checkbox label="Item4">
             <input type="checkbox" ng-model="checkbox.item4">
           </div>
-
         </form>
       </div>
-      <div class="col-xs-6"></div>
+      <div class="col-xs-6 description">
+         <p>Create a material design checkbox by adding <code>abmCheckbox</code> directive to the checkbox input's wrapper.
+         Add a <code>label</code> property on it to specify it's label</p>
+        <p>Create a checkbox group by simply wrapping the checkboxes in a <code>abmFormGroup</code> directive</p>
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-6">
@@ -173,7 +186,9 @@ <h4><a href="#radio">Radio</a></h4>
           </div>
         </form>
       </div>
-      <div class="col-xs-6"></div>
+      <div class="col-xs-6 description">
+        <p>Creating a material design radio or radio group is similar to creating a checkbox or checkbox group, except that <code>abmRadio</code> directive needs to be added to the radio input's wrapper.
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-6">