CSS Framework Selection: Foundation over Bootstrap

Justin Obara obara.justin at gmail.com
Fri Feb 14 13:52:53 EST 2014


Thanks for chiming in on the discussion Steve. I'm curious to know if Jon's explanation addresses your concerns. 

It would be good to hear all other concerns, questions, and comments about the two systems that our community might have. We are aiming to have this decided by early next week, and to facilitate a workshop on how to use the chosen framework at the community meeting on Feb 19. If we cannot decide by then, we'll use the community meeting to continue the discussion. The reason why we'd like to decide soon is that, as part of our upcoming Infusion 1.5 release, we plan to deprecate FSS (Fluid Skinning System). Ideally we'd like to inform our users what we will be switching to for internal development (e.g. demos) in the release notes, and begin working with the new CSS Framework after the Infusion 1.5 release. 

In terms of my opinions on the matter. I've been privied to the investigation into Bootstrap and Foundation that Anastasia and Jon have been conducting. I believe they've hit upon most, if not all, of the large issues we'd run into. So I'd like to +1 their recommendation. In terms of the issues they've raised. I feel like the change to UIO / Prefs Framework and how it handles font size and line height, needs to happen regardless of the decision on the CSS framework. We want it to be versatile enough to work in a broad range of conditions. The lack of full IE support is unfortunate, but we have been contemplating dropping IE 8 support after the Infusion 1.5 release. 

Thanks
Justin

On Feb 14, 2014, at 10:57 AM, Jonathan Hung <jhung at ocadu.ca> wrote:

> 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
> _______________________________________________________
> 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/ea1c4f05/attachment.html>


More information about the fluid-work mailing list