Add container class and grid system

Author: SyntaxCacao

scss/index.scss

@@ -1,3 +1,7 @@
 // requirements
 @import "variables.scss";
 @import "mixins/clearfix.scss";
+
+// layout
+@import "layout/container.scss";
+@import "layout/grid.scss";

scss/layout/container.scss

@@ -0,0 +1,7 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $container-width;
+
+  @include clearfix;
+}

scss/layout/grid.scss

@@ -0,0 +1,38 @@
+// class for every element containing columns
+.row {
+  display: table;
+  width: 100%;
+}
+
+// classes to define when columns inside a .row should break
+@each $breakpoint, $width in $breakpoints {
+  @media (max-width: $width) {
+    .break-#{$breakpoint} .column {
+      padding: 0;
+      width: 100%;
+    }
+  }
+}
+
+// class for every column
+.column {
+  display: inline-block;
+  float: left;
+  padding-left: round($column-padding / 2);
+  padding-right: round($column-padding / 2);
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+// classes to define the width of a column
+@for $index from 1 through 12 {
+  .width-#{$index} {
+    width: ($index/12 * 100%);
+  }
+}

scss/variables.scss

@@ -31,3 +31,13 @@ $spacer-3: nth($spacers, 3);
 $spacer-4: nth($spacers, 4);
 $spacer-5: nth($spacers, 5);
 $spacer-6: nth($spacers, 6);
+
+// *** components ***
+
+// ** layout **
+
+// responsive container
+$container-width: 980px !default;
+
+// grid
+$column-padding: $spacer-2 !default;