CSS Framework Selection: Foundation over Bootstrap

Jonathan Hung jhung at ocadu.ca
Fri Feb 14 10:57:18 EST 2014


Hi Steve,

Thanks for that observation.

The collapsing of the top navigation bar is customizable in Foundation
either by setting a different visibility class (i.e. "show-for-medium" vs.
"show-for-small" if you want collapsing sooner), or by adding a custom
media query or style for the nav bar.

It's expected that we'll be doing our own tweaks regardless of whether we
use Bootstrap or Foundation.

For what it's worth, my personal experience has been primarily Bootstrap as
well, but recommending fluid project adopt Foundation for the reasons
mentioned in the original email.

- Jon.


On Fri, Feb 14, 2014 at 2:51 AM, Steven Githens <swgithen at mtu.edu> wrote:

>  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 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
>
>
>
> *OCAD UNIVERSITY*
>
> Inclusive Design Research Centre
>
> 205 Richmond Street W, Toronto, ON, M5V 1V3
>
>
>
> www.ocadu.ca
>
> 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
>
>
>
> _______________________________________________________
> 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
>



-- 

*JONATHAN HUNG*

INCLUSIVE DESIGNER, IDRC



*T:* 416 977 6000 x3951

*F:* 416 977 9844

*E:* jhung at ocadu.ca



*OCAD UNIVERSITY*

Inclusive Design Research Centre

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



www.ocadu.ca

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


More information about the fluid-work mailing list