A better grid system

Until recently I’ve been using a 12 column grid system that is very similar to the one Bootstrap uses, with an almost identical API. In the majority of cases this grid system is suffice and works pretty well.

However it does have some major shortcomings

Adding in JavaScript to create equal heights adds to the size of your JS file, but worst of all DOM manipulation in JavaScript is extremely expensive—especially on events like a screen resize.
You can throttle the resize event but it’s still not ideal.

The issue of a bloated CSS file is the fact we’re serving up styles to our users that will never be used. All those width classes at every breakpoint, the same for push, pull and offset classes— it all adds up!

Having a 12 column grid becomes a problem when a client decides the want five equally spaced boxes, the only way around this is to hack. The col-sm-{n} API just won’t work here, so your class name will make little sense.

##We need a more flexible solution. So i checked out csswizardry-grids by Harry Roberts. This is a fantastic little grid system and it solves a lot of these issues:

Harry’s grid also adds in some pretty nifty features

So by switching to Harry’s grid we already have a vast improvement over Bootstrap’s offering. But we’re still missing equal heights, I’d like an even further reduction on bloat—Harry’s grid does a great job, but can it be take further? And what about variable breakpoints?

##rbtsmith grid There’s hundreds of weird and crazy names for grid systems out there so I took the lazy option and just named it after my blog - and my own name.

This grid does in fact offer equal heights using flexbox. It has the drawback of equal heights only working in IE10+. I did experiment with using display:table and that does give equal heights, but that itself has drawbacks:

I have also added the ability to chose between Large, standard, small or zero gutters, all of which are customizable.

To get varying numbers of and values for grid breakpoints I employ a Sass list and it’s default value can be overridden. The breakpoint name becomes part of the class name API and value will be compiled to generate corresponding classes. This not only adds flexibility—it reduces bloat.

To keep bloat even lower rwsmith grid comes with a large feature toggle list that can be overridden to turn off width, push, pull classes and grid modifiers too. It might take a little more time to get things setup, but your resulting CSS will contain very little bloat.

After reading Harry’s recent articles regarding CSS namespacing and responsive suffixes I decided to base my API upon this system Harry has called BEMIT.

To read more about rwsmith grid, see the API and download please check out the GitHub Repository
it can be downloaded via bower: bower install rbrtsmith-grid

Also check out the demo

If you have any comments about how this could be improved or bugs that you might come across please comment below or fire me a tweet!