[Task] docs

Author: Markus Falk

README.md

@@ -10,11 +10,59 @@ Docs
 grid-layout($columns: 24, $sitewidth: 960, $margin: 20)
 ```
 
+HTML
+----
+
+```html
+<h2>Example (xof24)</h2>
+<div class="cols24">
+  <div class="col c8of24">&nbsp;</div>
+  <div class="col c8of24">&nbsp;</div>
+  <div class="col c8of24">&nbsp;</div>
+</div> <!-- cols -->
+
+<h2>Columns with offset (xof24)</h2>
+<div class="cols24">
+  <div class="col c8of24 offset8of24">&nbsp;</div>
+  <div class="col c8of24">&nbsp;</div>
+</div> <!-- cols -->
+
+<h2>Columns with offset (xof24)</h2>
+<div class="cols24">
+  <div class="col c4of24">&nbsp;</div>
+  <div class="col c16of24 offset4of24">&nbsp;</div>
+</div> <!-- cols -->
+
+<h2>Columns with offset (xof24)</h2>
+<div class="cols24">
+  <div class="col c4of24">&nbsp;</div>
+  <div class="col c4of24">&nbsp;</div>
+  <div class="col c4of24">&nbsp;</div>
+  <div class="col c6of24 offset6of24">&nbsp;</div>
+</div> <!-- cols -->
+
+<h2>Second set of columns (xof12)</h2>
+<div class="cols12">
+  <div class="col c4of12">&nbsp;</div>
+  <div class="col c8of12">&nbsp;</div>
+</div> <!-- cols -->
+
+<h2>Second set of columns (xof12)</h2>
+<div class="cols12">
+  <div class="col c8of12 offset4of12">&nbsp;</div>
+</div> <!-- cols -->
+```
+
 Usage Examples
 --------------
 
-Plain:
+Default:
 ```scss
+/*
+generates a grid that has 24 columns with a 20px
+margin at 960px width
+*/
+
 @include grid-layout();
 ```
 

_grid-layout.scss

@@ -1,5 +1,5 @@
-// $sitewidth and $margin in px
-@mixin mf-layout ($columns: 24, $sitewidth: 960, $margin: 20) {
+@mixin grid-layout ($columns: 24, $sitewidth: 960, $margin: 20) {
+
   $col-margin: percentage($margin/$sitewidth);
 
   .cols#{$columns} {