CSS grids, frameworks and boilerplates

Now first things first – I wasn’t looking for a framework nor a boilerplate. Frameworks are nice, but an overkill with what I do, because all projects have a custom design, so most styles from a framework would be a throw away. Boilerplate – that’s nice, but wouldn’t use it that much either, and what I would make a good use of is a grid system that would speed up the layout development.

I’ve set a few requirements from which the most important would be the ability to adjust the base grid size. So no fixed 960, 1140 or any other – I want to be able to set this and I don’t want to do a lot to achieve this. A quick search resulted with a list of things to look at, and after filtering, here are the ones I investigated a bit more closely (and yes some of them are full frameworks or boilerplates, but at the time, I didn’t know exactly what I was looking for)

http://semantic.gs/
http://foundation.zurb.com/
http://builtbyboon.com/blog/proportional-grids/
http://twitter.github.io/bootstrap/
http://www.blueprintcss.org/
http://yuilibrary.com/
http://www.amazium.co.uk/
http://gumbyframework.com/
http://www.prowebdesign.ro/yamb2/
http://cjdsie.github.io/wirefy/
http://goldengridsystem.com/
http://www.getskeleton.com/
http://simplegrid.info/
http://code.google.com/p/css-boilerplate/
http://thatcoolguy.github.io/gridless-boilerplate/
http://unsemantic.com/
http://goldilocksapproach.com/
http://framelessgrid.com/

I hoped to find something that got to me at first glance – sort of like jquery, but I didn’t. The good news though is that I found something that I liked.

For the sake of clarity, I didn’t pick anything that’s only sass based – that’s because I don’t use sass, I use less for reasons explained here. I didn’t want to introduce a new technology just because it was required to use a grid, but with the latest version of web essentials I may reconsider.

The list provided above is actually sorted by relevance to my requirements. So, the final choice for me is semantic. The methodology suits me, the grid is flexible and it uses less.

The second place is the thing I already know – foundation. It’s a full framework, but built in a way that allows you to pick what you need from it. The grid can be configured on their site as well as the rest of the components. If I wasn’t using less, this would be my choice.

Closely by, but on the third place is the proportional grid. It came third because foundation has much better docs and I feel that it does give more flexibility, but on the other side, proportional is just a grid system, nothing more – and that’s a good thing. If I were to develop a small site or a static site, this would be my choice, because it’s so compact.

Hope this list will be useful to anyone wondering the same thing. Try them out, check which one suits you and start using it, because doing float: left; over and over is beginning to be a bit boring.

Cheers