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:*[email protected] <mailto:[email protected]>
*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 - [email protected]
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
_______________________________________________________
fluid-work mailing list - [email protected]
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
