cleanup + now topper

src/posts/2016/generating-responsive-css-grid-neat.md

@@ -0,0 +1,92 @@
+---
+title: Generating a responsive CSS grid using Neat
+date: '2016-07-24'
+draft: false
+tags: ['development', 'css', 'sass']
+---
+
+I use a responsive grid system for this site (and a number of other projects) that's generated by pulling in Thoughtbot's [Neat](http://neat.bourbon.io/) framework.<!-- excerpt --> To generate the framework for this grid, I've put together a simple SASS/SCSS mixin that looks like the following:"
+
+```scss
+.grid {
+    &-main-container {
+        @include outer-container;
+    }
+
+    &-row {
+        @include row;
+        @include pad(0 10%);
+
+        @media only screen and (max-width: 640px) {
+            @include pad(0 10%);
+        }
+
+        &.collapse {
+            @media only screen and (max-width: 640px) {
+                @include pad(0);
+            }
+        }
+
+        .grid-row {
+            // collapse nested grid rows
+            @include pad(0);
+        }
+    }
+
+    $grid-columns: 12;
+
+    @for $i from 0 through $grid-columns {
+        &-columns-#{$i} {
+            @include span-columns($i);
+        }
+
+        &-columns-small-#{$i} {
+            @include span-columns($i);
+
+            @media only screen and (max-width: 640px) {
+                @include span-columns(12);
+            }
+        }
+    }
+    @for $i from 0 through $grid-columns {
+        &-shift-left-#{$i} {
+            @include shift(-$i);
+        }
+
+        &-shift-right-#{$i} {
+            @include shift($i);
+        }
+
+        @media only screen and (max-width: 640px) {
+            &-shift-left-#{$i},
+            &-shift-right-#{$i} {
+                @include shift(0);
+            }
+        }
+    }
+}
+```
+
+To use the grid, simply drop it in as an import after including Neat. Once your SASS/SCSS files have been parsed, you'll end up with completed grid classes that will allow you to generate responsive markup for a page. For example:
+
+```html
+<div class="grid-main-container">
+        <div class="grid-row>
+                <div class="grid-columns-9">
+                <!-- Content -->
+                </div>
+                <div class="grid-columns-3">
+                <!-- Content -->
+                </div>
+        </div>
+        <!-- Columns in this row will collapse to the full screen width on small screens -->
+        <div class="grid-row>
+                <div class="grid-columns-small-9">
+                <!-- Content -->
+                </div>
+                <div class="grid-columns-small-3">
+                <!-- Content -->
+                </div>
+        </div>
+</div>
+```