CSS Framework Selection: Foundation over Bootstrap
swgithen at mtu.edu
Fri Feb 14 02:51:47 EST 2014
I've used (and am using) Bootstrap on a number of projects, and hadn't
heard of Foundation until now.
After spending, literally just 2 minutes on their site, I'll go ahead
and cast a naive vote for Foundation based on the only premise that the
top navigation menu waits longer to collapse into a single drop down
than in bootstrap ,which always drove me nuts.
What I'm talking about is theh top bar tihng. In bootstrap, even if you
only had like 3 items on it, if you made the window smaller, it would
turn in to a drop down menu long before the window would have been too
small to fit the 3 items.
On the foundation front page, it seems to actually wait right until
there isn't enough room before turning the menus into a drop down.
Soooo, I haven't actually looked at anything else, but that's enough for
On 02/11/2014 06:57 PM, Jonathan Hung wrote:
> 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 <http://fluidproject.org/> designs using each of the
> 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
> . 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.
> *JONATHAN HUNG*
> INCLUSIVE DESIGNER, IDRC
> *T:*416 977 6000 x3951
> *F:*416 977 9844
> *E:*jhung at ocadu.ca <mailto:jhung at ocadu.ca>
> *OCAD UNIVERSITY*
> Inclusive Design Research Centre
> 205 Richmond Street W, Toronto, ON, M5V 1V3
> www.ocadu.ca <http://www.ocadu.ca/>
> www.idrc.ocad.ca <http://www.idrc.ocad.ca/>
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the fluid-work