We decided to move away from heavyweight class-based frameworks (like foundation/bootstrap) because 

  1. We’re wasting a lot of time just having to overwrite the default styling. 
  2. Sometimes class-based grid systems make a designer do this: 


(Bootstrap isn’t really to blame but it can make things more complicated than they need to be)


So we settled on bourbon neat - it’s got exactly what we needed - a grid that we can customize on a per project basis. 

Weaning yourself off Bootstrap can be hard, especially since it is pretty much invaluable for fast prototyping. The one thing I missed the most was not having to worry about my media-queries when it came to columns in a layout - and Bourbon Neat didn’t seem to come with this feature by default. So I came up with a little workaround. 

Probably not the official way to do it, and if you find a simpler way, let me know! 

I was trying to get my columns to drop to full width on resize like they do in http://neat.bourbon.io/examples/ without having to write

@include media ($breakpoint-variable) {
  @include span-columns ($breakpoint-columns);

on every div that I wanted to drop to full width by default on resize, so I came up with a neat little workaround: 

@mixin col($col-no, $shift-no, $media, $drop-to, $shift-to) {
  @include span-columns($col-no);
  @include shift($shift-no);
  @include media($media) {
    @include span-columns($drop-to);
    @include shift($shift-to);

Why all the code? Well, ignoring shift will cause major problems if you have collumns within the same outer-container - having the shift outside of this mediaquery definition will offset the next container with an uneven percentage, making it impossible to align any of your columns properly.

(P.S I suspect I will run into some snags with this solution as well, as my initial attempts at creating this function led to a lot of bafflement with the shift problem, but for now it’s the best solution I’ve found)

it will give you a nice bit of control, so for example, this is how we make a 6 column wide div, shifted by 2 columns, that drops to a  5 column with no shift on a tablet screen:

.div {
  @include col (6, 2, $tablet, 5, 0)

Bang tidy.