We decided to move away from heavyweight class-based frameworks (like foundation/bootstrap) because
- We’re wasting a lot of time just having to overwrite the default styling.
- 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.
