<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <div class="moz-cite-prefix">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<br>
      <br>
      On 02/11/2014 06:57 PM, Jonathan Hung wrote:<br>
    </div>
    <blockquote
cite="mid:CAM7qu_FdH6qAoAWn15SdsRmkFmph0xhFc-KkYWSq2myjGyHnDQ@mail.gmail.com"
      type="cite">
      <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
                moz-do-not-send="true" 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
                  moz-do-not-send="true"
                  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
                  moz-do-not-send="true"
                  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
                  moz-do-not-send="true"
                  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 moz-do-not-send="true"
                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
                moz-do-not-send="true"
                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 moz-do-not-send="true"
                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
              moz-do-not-send="true"
              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-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</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"> </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
                moz-do-not-send="true" value="+14169776000"
                style="color:rgb(17,85,204)">416 977 6000 x3951</a></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
                moz-do-not-send="true" value="+14169779844"
                style="color:rgb(17,85,204)">416 977 9844</a></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
                moz-do-not-send="true" 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-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"> </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"></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</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</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"> </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
                moz-do-not-send="true" 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-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
                moz-do-not-send="true" href="http://www.idrc.ocad.ca/"
                style="color:blue" target="_blank">www.idrc.ocad.ca</a></span></p>
        </div>
      </div>
      <br>
      <fieldset class="mimeAttachmentHeader"></fieldset>
      <br>
      <pre wrap="">_______________________________________________________
fluid-work mailing list - <a class="moz-txt-link-abbreviated" href="mailto:fluid-work@fluidproject.org">fluid-work@fluidproject.org</a>
To unsubscribe, change settings or access archives,
see <a class="moz-txt-link-freetext" href="http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work">http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work</a></pre>
    </blockquote>
    <br>
  </body>
</html>