<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-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>