CSS Framework Selection: Foundation over Bootstrap

[Steven Githens]

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 
me.  :p

-steve

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 
> 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.
>
> Thanks!
>
> - 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...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20140214/ebe5ab52/attachment.html>