First pass at flexbox grid

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store

Gruntfile.js

@@ -0,0 +1,29 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+        autoprefixer: {
+            compile: {
+                src: 'src/grid.css',
+                dest: 'css/flexgrid.css'
+            }
+        },
+        cssmin: {
+            minify: {
+                expand: true,
+                cwd: 'css',
+                src: ['*.css', '!*.min.css'],
+                dest: 'css',
+                ext: '.min.css'
+            }
+        }
+    });
+
+    // These plugins provide necessary tasks.
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-autoprefixer');
+
+    // Default task.
+    grunt.registerTask('default', ['autoprefixer', 'cssmin']);
+
+};

css/flexgrid.css

@@ -0,0 +1,345 @@
+.grid-margin {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 2rem;
+}
+
+.row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 0 -1rem;
+}
+
+.row.reverse {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  -webkit-flex-wrap: row-reverse;
+  -ms-flex-wrap: row-reverse;
+  flex-wrap: row-reverse;
+}
+
+.column {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.column.reverse {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+  -webkit-flex-wrap: column-reverse;
+  -ms-flex-wrap: column-reverse;
+  flex-wrap: column-reverse;
+}
+
+.column--1,
+.column--2,
+.fourth,
+.column--3,
+.third,
+.column--4,
+.column--5,
+.half,
+.column--6,
+.column--7,
+.two-thirds,
+.column--8,
+.three-fourths,
+.column--9,
+.column--10,
+.column--11,
+.full,
+.column--12 {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 100%;
+  -ms-flex: 1 0 100%;
+  flex: 1 0 100%;
+}
+
+.offset--1,
+.offset--2,
+.offset--3,
+.offset--4,
+.offset--5,
+.offset--6,
+.offset--7,
+.offset--8,
+.offset--9,
+.offset--10,
+.offset--11,
+.offset--12 {
+  margin-left: 0;
+}
+
+.row,
+.column,
+.auto,
+.column--1,
+.column--2,
+.fourth,
+.column--3,
+.third,
+.column--4,
+.column--5,
+.half,
+.column--6,
+.column--7,
+.two-thirds,
+.column--8,
+.three-fourths,
+.column--9,
+.column--10,
+.column--11,
+.full,
+.column--12,
+.offset--1,
+.offset--2,
+.offset--3,
+.offset--4,
+.offset--5,
+.offset--6,
+.offset--7,
+.offset--8,
+.offset--9,
+.offset--10,
+.offset--11,
+.offset--12 {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 0.5rem;
+}
+
+.auto {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.top,
+.start {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  text-align: start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
+}
+
+.center {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.bottom,
+.end {
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end;
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+  text-align: end;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.around {
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.between {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+@media only screen and (min-width: 33rem) {
+  .column--1 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 8.333%;
+    -ms-flex: 0 0 8.333%;
+    flex: 0 0 8.333%;
+  }
+
+  .column--2 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 16.666%;
+    -ms-flex: 0 0 16.666%;
+    flex: 0 0 16.666%;
+  }
+
+  .fourth,
+  .column--3 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 25%;
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+  }
+
+  .third,
+  .column--4 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 33.333%;
+    -ms-flex: 0 0 33.333%;
+    flex: 0 0 33.333%;
+  }
+
+  .column--5 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 41.666%;
+    -ms-flex: 0 0 41.666%;
+    flex: 0 0 41.666%;
+  }
+
+  .half,
+  .column--6 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
+
+  .column--7 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 58.333%;
+    -ms-flex: 0 0 58.333%;
+    flex: 0 0 58.333%;
+  }
+
+  .two-thirds,
+  .column--8 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 66.666%;
+    -ms-flex: 0 0 66.666%;
+    flex: 0 0 66.666%;
+  }
+
+  .three-fourths,
+  .column--9 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 75%;
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+  }
+
+  .column--10 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 83.333%;
+    -ms-flex: 0 0 83.333%;
+    flex: 0 0 83.333%;
+  }
+
+  .column--11 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 91.666%;
+    -ms-flex: 0 0 91.666%;
+    flex: 0 0 91.666%;
+  }
+
+  .full,
+  .column--12 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 100%;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+  }
+
+  .offset--1 {
+    margin-left: 8.333%;
+  }
+
+  .offset--2 {
+    margin-left: 16.666%;
+  }
+
+  .offset--3 {
+    margin-left: 25%;
+  }
+
+  .offset--4 {
+    margin-left: 33.333%;
+  }
+
+  .offset--5 {
+    margin-left: 41.666%;
+  }
+
+  .offset--6 {
+    margin-left: 50%;
+  }
+
+  .offset--7 {
+    margin-left: 58.333%;
+  }
+
+  .offset--8 {
+    margin-left: 66.666%;
+  }
+
+  .offset--9 {
+    margin-left: 75%;
+  }
+
+  .offset--10 {
+    margin-left: 83.333%;
+  }
+
+  .offset--11 {
+    margin-left: 91.666%;
+  }
+}