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

title	date	draft	tags
Generating a responsive CSS grid using Neat	2016-07-24	false	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 framework. To generate the framework for this grid, I've put together a simple SASS/SCSS mixin that looks like the following:"

.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:

<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>