<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="PT-BR" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal">Hi all,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span lang="EN-US">In order to generate the new-ui elements I’m using Bootstrap Sass port (<a href="http://sass-lang.com/">http://sass-lang.com/</a>), changing variable values and adding or removing CSS properties when necessary. I’m also
doing the same with jquery-ui, since we still use it for accordions and I think I saw some other JQ-UI widgets in Ginger.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">I’m aiming to make a “stable” customized Bootstrap and jQuery-Ui theme in /ui/css/ but I was thinking in separating BS/jQ-UI CSS from Wok/Kimchi/Ginger exclusive CSS but still making both files inherit the same variables
(colors, widths, etc).<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">This transition can be easily done with Sass and I’m already using it separated from Kimchi project: I manage a separated static UI and include the generated CSS output in the patches I’ve sent to the ML. I think that
for future releases, maintenance and compatibility with newer BS and JQ-UI versions (BS v4 is still in Alpha but looks promising) it would be great to have this feature implemented in Kimchi and I think the timing is perfect since we’re adding the new-ui in
2.0.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">So, I did some research and I found this Sass port for Python:
<a href="https://github.com/dahlia/libsass-python">https://github.com/dahlia/libsass-python</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">There’s also SassC (<a href="https://github.com/sass/sassc">https://github.com/sass/sassc</a>) but I couldn’t find any package for it.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">The main idea is use Sass to treat each UI widget / component or section as a “module”. So instead of using a Makefile to concatenate all files in css/theme-default in theme-default.min.css, we would tell the Makefile
to run libsass / sassc command in one theme-default.scss file that would handle all the modules in the correct order and then this filed would be minified in theme-default.min.css.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Originally I have thought we could use Bower (front-end package manager), GulpJS and Node-LibSass port but they all need NodeJS to run, our 3<sup>rd</sup> party JavaScript libraries are stable and we have to keep a copy
of their licenses (which Bower can’t do, so we don’t need it anymore). FontAwesome and OpenSans are also stable and require a different configuration that Bower and GulpJS don’t support.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">So in the end GulpJS would be necessary just for JavaScript validation and testing and to compile Sass files into CSS… I think we can run JS lint with our own IDEs and leave the Sass compilation task to Makefile and python-libsass/sassc.
What are your feelings on this?<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Thanks,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Samuel<o:p></o:p></span></p>
</div>
</body>
</html>