[Task] make bower package

Author: Markus Falk

README.md

@@ -2,3 +2,35 @@ grid-layout
 ===========
 
 scss mixin for creating grid layouts
+
+Docs
+----
+
+```scss
+grid-layout($columns: 24, $sitewidth: 960, $margin: 20)
+```
+
+Usage Examples
+--------------
+
+Plain:
+```scss
+@include grid-layout();
+```
+
+Advanced:
+```scss
+/*
+generates a grid that has 24 columns with a 10px
+margin at 1020px width
+*/
+
+@include grid-layout(24, 1020, 10);
+```
+
+Installation
+------------
+
+```shell
+bower install markusfalk/grid-layout
+```

_grid-layout.scss

@@ -0,0 +1,47 @@
+// $sitewidth and $margin in px
+@mixin mf-layout ($columns: 24, $sitewidth: 960, $margin: 20) {
+  $col-margin: percentage($margin/$sitewidth);
+
+  .cols#{$columns} {
+    margin: 0;
+
+    &:after {
+      clear: both;
+      content: " ";
+      display: block;
+      font-size: 0;
+      visibility: hidden;
+    }
+
+    > .col {
+      float: left;
+      margin-left: $col-margin;
+      min-height: 1px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  $i: $columns;
+
+  @while $i > 0 {
+    $width: (100% / $columns) * $i;
+    $margin: ($col-margin / $columns) * $i;
+
+    .c#{$i}of#{$columns} {
+      width: $width + $margin - $col-margin;
+    }
+
+    .cols#{$columns} .col.offset#{$i}of#{$columns} {
+      margin-left: $width + $margin + $col-margin;
+    }
+
+    .cols#{$columns} .col.offset#{$i}of#{$columns}:first-child {
+      margin-left: $width + $margin;
+    }
+
+    $i: $i - 1;
+  }
+}

bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "grid-layout",
+  "version": "1.0.0",
+  "homepage": "https://github.com/markusfalk/grid-layout",
+  "authors": [
+    "Markus Falk <[email protected]>"
+  ],
+  "description": "scss mixin for creating grid layouts",
+  "main": "_grid-layout.scss",
+  "keywords": [
+    "grid",
+    "mixin",
+    "scss"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "*.html"
+  ]
+}