<div dir="ltr">Hi Steve,<div><br></div><div>Thanks for that observation.</div><div><br></div><div>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.</div>
<div><br></div><div>It's expected that we'll be doing our own tweaks regardless of whether we use Bootstrap or Foundation.</div><div><br></div><div>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.</div>
<div><br></div><div>- Jon. <br></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Fri, Feb 14, 2014 at 2:51 AM, Steven Githens <span dir="ltr"><<a href="mailto:swgithen@mtu.edu" target="_blank">swgithen@mtu.edu</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
  
    
  
  <div bgcolor="#FFFFFF" text="#000000">
    <div>I've used (and am using) Bootstrap on a
      number of projects, and hadn't heard of Foundation until now.<br>
      <br>
      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.<br>
      <br>
      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. <br>
      <br>
      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. <br>
      <br>
      Soooo, I haven't actually looked at anything else, but that's
      enough for me.  :p  <br>
      <br>
      -steve<div><div class="h5"><br>
      <br>
      On 02/11/2014 06:57 PM, Jonathan Hung wrote:<br>
    </div></div></div>
    <blockquote type="cite"><div><div class="h5">
      <div dir="ltr">
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font color="#000000">Hi everyone,</font>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000">Anastasia and I have been doing
              further evaluations of CSS frameworks for use in our
              components and demos. Our two candidates are <b>Bootstrap</b> and <b>Foundation</b>.
              We experimented by implementing the new <a href="http://fluidproject.org/" target="_blank">fluidproject.org</a> designs using each
              of the frameworks:</font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div>
            <div><font color="#000000"><span style="white-space:pre-wrap"></span>Foundation: <a href="https://github.com/jhung/fluidproject.org/tree/FLUID-5262" target="_blank">https://github.com/jhung/fluidproject.org/tree/FLUID-5262</a></font></div>

            <div><font color="#000000"><span style="white-space:pre-wrap"></span>Bootstrap: <a href="https://github.com/acheetham/fluidproject.org/tree/FLUID-5261" target="_blank">https://github.com/acheetham/fluidproject.org/tree/FLUID-5261</a></font></div>

          </div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000">(Note that both of these
              implementations are not actually complete; they were taken
              only far enough to evaluate the frameworks.)</font></div>
          <div>
            <font color="#000000"><br>
            </font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000">Currently, we are leaning toward <b>Foundation</b> as
              the framework of choice, for the following reasons:</font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000">• 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.</font></div>
          <div><font color="#000000"><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <div>
            <div><font color="#000000">• 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.</font></div>
            <div><font color="#000000"><br>
              </font></div>
            <div><font color="#000000">•  Foundation is MIT licensed (<a href="http://foundation.zurb.com/learn/faq.html" target="_blank">http://foundation.zurb.com/learn/faq.html</a>)
                and has wide industry adoption and community support</font></div>
            <div><font color="#000000"><br>
              </font></div>
          </div>
          <div><font color="#000000">It is worth noting that Foundation
              does not support IE8 (<a href="http://foundation.zurb.com/learn/faq.html" target="_blank">http://foundation.zurb.com/learn/faq.html</a>),
              and Bootstrap has limited support for IE8 (<a href="http://getbootstrap.com/getting-started/" target="_blank">http://getbootstrap.com/getting-started/</a>).</font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000"><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <div><font color="#000000"><b>BUT: </b><b>UI Options
                font-sizing / spacing issue:</b></font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000">We did encounter a couple of
              problems with the interaction between UIOptions and each
              of the frameworks:</font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000">• UIOptions does not support rem
              units (<a href="http://issues.fluidproject.org/browse/FLUID-4698" target="_blank">http://issues.fluidproject.org/browse/FLUID-4698</a>)
              so there are some issues with using Foundation: things
              specified with rems do not enlarge when UIOptions is used
              to scale things up.</font></div>
          <div><font color="#000000"><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font color="#000000">• 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 (<a href="http://issues.fluidproject.org/browse/FLUID-4698#comment-24151" target="_blank">http://issues.fluidproject.org/browse/FLUID-4698#comment-24151</a>). <br>

          </font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000">• As mentioned above, Bootstrap
              out-of-the-box uses pixels instead of ems. Most things
              resize nicely nonetheless, but not the main body width.</font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000"><br>
            </font></div>
          <div><font color="#000000"><b>What now?</b></font></div>
          <div><font color="#000000"><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <font color="#000000">We are in a position to recommend
            Foundation as the CSS framework to use - with the known
            issue stated above. </font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font color="#000000"><br>
          </font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font color="#000000">We would like to have your thoughts before
            coming to a vote / decision.</font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <font color="#000000"><br>
          </font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font color="#000000">Thanks!</font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <br>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">-
          Jon and Anastasia.</div>
        <div><br>
        </div>
        <div><br>
        </div>
        -- <br>
        <p style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif"><b style="font-size:12.499999046325684px"><span style="font-size:10pt;font-family:Tahoma,sans-serif">JONATHAN
              HUNG</span></b></p>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">INCLUSIVE
              DESIGNER, IDRC</span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"> </span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">T:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169776000" style="color:rgb(17,85,204)">416 977 6000 x3951</a></span></p>

        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
            <b><span style="font-size:10pt;font-family:Tahoma,sans-serif">F:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169779844" style="color:rgb(17,85,204)">416 977 9844</a></span></p>

        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
            <b><span style="font-size:10pt;font-family:Tahoma,sans-serif">E:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a href="mailto:jhung@ocadu.ca" style="color:blue" target="_blank">jhung@ocadu.ca</a></span></p>

        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
            <span style="font-size:10pt;font-family:Tahoma,sans-serif"> </span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
            <b><span style="font-size:10pt;font-family:Tahoma,sans-serif">OCAD UNIVERSITY</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"></span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">Inclusive
              Design Research Centre</span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">205
              Richmond Street W, Toronto, ON, M5V 1V3</span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
            <span style="font-size:10pt;font-family:Tahoma,sans-serif"> </span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
            <span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.ocadu.ca/" style="color:blue" target="_blank">www.ocadu.ca</a></span></p>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif">
          <p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.idrc.ocad.ca/" style="color:blue" target="_blank">www.idrc.ocad.ca</a></span></p>

        </div>
      </div>
      <br>
      <fieldset></fieldset>
      <br>
      </div></div><pre>_______________________________________________________
fluid-work mailing list - <a href="mailto:fluid-work@fluidproject.org" target="_blank">fluid-work@fluidproject.org</a>
To unsubscribe, change settings or access archives,
see <a href="http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work" target="_blank">http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work</a></pre>
    </blockquote>
    <br>
  </div>

<br>_______________________________________________________<br>
fluid-work mailing list - <a href="mailto:fluid-work@fluidproject.org">fluid-work@fluidproject.org</a><br>
To unsubscribe, change settings or access archives,<br>
see <a href="http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work" target="_blank">http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work</a><br></blockquote></div><br><br clear="all"><div><br></div>-- <br><p style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<b style="font-size:12.499999046325684px"><span style="font-size:10pt;font-family:Tahoma,sans-serif">JONATHAN HUNG</span></b></p><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">INCLUSIVE DESIGNER, IDRC<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif">T:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169776000" style="color:rgb(17,85,204)">416 977 6000 x3951</a><u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<b><span style="font-size:10pt;font-family:Tahoma,sans-serif">F:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a value="+14169779844" style="color:rgb(17,85,204)">416 977 9844</a><u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<b><span style="font-size:10pt;font-family:Tahoma,sans-serif">E:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"> <a href="mailto:jhung@ocadu.ca" style="color:blue" target="_blank">jhung@ocadu.ca</a><u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<b><span style="font-size:10pt;font-family:Tahoma,sans-serif">OCAD UNIVERSITY</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">Inclusive Design Research Centre<u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif">205 Richmond Street W, Toronto, ON, M5V 1V3<u></u><u></u></span></p>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<span style="font-size:10pt;font-family:Tahoma,sans-serif"><u></u> <u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif">
<span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.ocadu.ca/" style="color:blue" target="_blank">www.ocadu.ca</a><u></u><u></u></span></p></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)">
<p style="margin:0cm 0cm 0.0001pt;font-size:12pt;font-family:'Times New Roman',serif"><span style="font-size:10pt;font-family:Tahoma,sans-serif"><a href="http://www.idrc.ocad.ca/" style="color:blue" target="_blank">www.idrc.ocad.ca</a></span></p>
</div>
</div>