92 lines
2.5 KiB
Markdown
92 lines
2.5 KiB
Markdown
---
|
|
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>
|
|
```
|