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

date	title	description	tags
2016-07-24	Generating a responsive CSS grid using Neat	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.	development CSS

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>