<html><head><meta http-equiv="Content-Type" content="text/html charset=windows-1252"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;">Thanks for chiming in on the discussion Steve. I'm curious to know if Jon's explanation addresses your concerns. <div><br></div><div>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. </div><div><br></div><div>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. </div><div><br></div><div>Thanks</div><div>Justin</div><div><br></div><div><div><div>On Feb 14, 2014, at 10:57 AM, Jonathan Hung <<a href="mailto:jhung@ocadu.ca">jhung@ocadu.ca</a>> wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><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>Hi everyone,</font>
          <div><font><br>
            </font></div>
          <div><font>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><br>
            </font></div>
          <div>
            <div><font><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><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><br>
            </font></div>
          <div><font>(Note that both of these
              implementations are not actually complete; they were taken
              only far enough to evaluate the frameworks.)</font></div>
          <div>
            <font><br>
            </font></div>
          <div><font><br>
            </font></div>
          <div><font>Currently, we are leaning toward <b>Foundation</b> as
              the framework of choice, for the following reasons:</font></div>
          <div><font><br>
            </font></div>
          <div><font> 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><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <div>
            <div><font> 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><br>
              </font></div>
            <div><font>  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><br>
              </font></div>
          </div>
          <div><font>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><br>
            </font></div>
          <div><font><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <div><font><b>BUT: </b><b>UI Options
                font-sizing / spacing issue:</b></font></div>
          <div><font><br>
            </font></div>
          <div><font>We did encounter a couple of
              problems with the interaction between UIOptions and each
              of the frameworks:</font></div>
          <div><font><br>
            </font></div>
          <div><font> 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><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font> 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><br>
            </font></div>
          <div><font> 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><br>
            </font></div>
          <div><font><br>
            </font></div>
          <div><font><b>What now?</b></font></div>
          <div><font><br>
            </font></div>
        </div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px">
          <font>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><br>
          </font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font>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><br>
          </font></div>
        <div style="font-family:arial,sans-serif;font-size:12.499999046325684px"><font>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"><div 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></div>
        </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"><div 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></div>

        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif"><div 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></div>

        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif"><div 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></div>

        </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"><div 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></div>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif"><div 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></div>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif"><div 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></div>
        </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"><div 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></div>
        </div>
        <div style="color:rgb(34,34,34);font-size:12.499999046325684px;font-family:arial,sans-serif"><div 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></div>

        </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)"><div 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></div></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div>
</div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div></div><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.499999046325684px;background-color:rgb(255,255,255)"><div 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></div>
</div>
</div>
_______________________________________________________<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">http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work</a></blockquote></div><br></div></body></html>