CSS Framework Selection: Foundation over Bootstrap

Jonathan Hung jhung at ocadu.ca
Tue Feb 11 10:57:00 EST 2014

Hi everyone,

Anastasia and I have been doing further evaluations of CSS frameworks for
use in our components and demos. Our two candidates are *Bootstrap* and
*Foundation*. We experimented by implementing the new fluidproject.org designs
using each of the frameworks:

Foundation: https://github.com/jhung/fluidproject.org/tree/FLUID-5262
Bootstrap: https://github.com/acheetham/fluidproject.org/tree/FLUID-5261

(Note that both of these implementations are not actually complete; they
were taken only far enough to evaluate the frameworks.)

Currently, we are leaning toward *Foundation* as the framework of choice,
for the following reasons:

* The CSS in Foundation is more lightweight and granular, making
customizations easier. Bootstrap contains many components (CSS and JS)
which we will unlikely use, and its CSS is a little more complex, making
customizations a little more complicated.

* Foundation uses rem (root EM) units for all dimensions, spacing, and
text. rem units, like em units, are desirable because it scales nicely
across devices. Bootstrap uses px units for all values.

*  Foundation is MIT licensed (http://foundation.zurb.com/learn/faq.html)
and has wide industry adoption and community support

It is worth noting that Foundation does not support IE8 (
http://foundation.zurb.com/learn/faq.html), and Bootstrap has limited
support for IE8 (http://getbootstrap.com/getting-started/).

*BUT: **UI Options font-sizing / spacing issue:*

We did encounter a couple of problems with the interaction between
UIOptions and each of the frameworks:

* UIOptions does not support rem units (
http://issues.fluidproject.org/browse/FLUID-4698) so there are some issues
with using Foundation: things specified with rems do not enlarge when
UIOptions is used to scale things up.

* However, moving the line-height and font-size adjuster from the body
element to the html element allows the font and line spacing to behave as
expected (http://issues.fluidproject.org/browse/FLUID-4698#comment-24151).

* As mentioned above, Bootstrap out-of-the-box uses pixels instead of ems.
Most things resize nicely nonetheless, but not the main body width.

*What now?*

We are in a position to recommend Foundation as the CSS framework to use -
with the known issue stated above.

We would like to have your thoughts before coming to a vote / decision.


- Jon and Anastasia.




*T:* 416 977 6000 x3951

*F:* 416 977 9844

*E:* jhung at ocadu.ca


Inclusive Design Research Centre

205 Richmond Street W, Toronto, ON, M5V 1V3


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20140211/1916ff1d/attachment.html>

More information about the fluid-work mailing list