The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other [Closed] Your Thoughts! Bootstrap 3 vs Foundation 4 Reply To: Your Thoughts! Bootstrap 3 vs Foundation 4


Hi friends :) from the layout framework front!

I stumbled upon a problem using bootstrap with not boostrappy-looking design I like to share. Maybe some of you guys have run into this problem or will some day.

Both foundation and BS provide a single (responsive) grid. I probably do not need tell u the value of having it, when designing responsive and adaptive layouts. My current project has a great designer attached, who comes up with visually good looking designs in which he doesn’t let himself be bothered by technical possibilities. I would not have it any other way, but the end result is a design that has divisions in it that need grids of 8, 9, 10 and 12 ‘columns’, with or without gutters. These grids sometimes are nested, sometimes sibling beneath each other.

Problem: to be true to the design having only one grid, I would make a grid of the least common multiple. In my case that would mean a staggering 180 cols! I do not have to tell u that would be a serious drain on the css involved (payload), the render engine that would really be affected and the overhead in taking n-th part of 180 for every column in the design. Route no-go off course.

We could pick offcourse a close smaller ‘common multiple’ that affects layout a bit, but keeps the total columns ‘controllable’. I would off course have to do the column caculations in the code, which is all very cumbersome.

In the light of the subject (BS vs F4) it’s no real dealbreaker, both systems only provide a single grid, with the possibility of setting only 1 gutter size. (F4 not sure here).

I solved the problem the other way around; Extended the BS framework with a multiple grid-system, supporting arbitrary sets of grid-col counts at the price of somewhat more css code. (approx 16% per extra grid to the grid-only base of 15k not-gzipped).

The point why I make it here is twofold; Firstly, I must agree with Dave some more that the system has it’s drawbacks on some layouts. Creating the multiple grid system is not something anyone just can do and there-in lies another thruth, in between Dave’s and mine; I was able to do this only by studying the spledid original work of the twitter BS team. My agumentation was a ‘natural one’, and didn’t take me that much time to create if it wasn’t for the crappy implementation of less 1.4 when it comes to generating code and reuse/extend upon generated classes. I ended up in writing a non-less-based less generator in server side code.

Should anybody be interested in the end result, I’m happy to share with u guys off course.