I'd like to use a grid framework (e.g. blueprint/960.gs/...) with LESS(.js) but it looks there's some issues when you decide to go that way:
For example with blueprint: The ie hacks stylesheet prevents to use the container/span-X classes as mixins given that the mixed-in classes will not appear in the html elements. for example put
#content { .container; }
in your .less stylesheet, the ie hacks will not get applied (and it make sense).
So I was wondering if anyone already "ported" blueprint or 960gs to less css? I look on google but haven't found anyting (I tried myself but given the IE hacks/css selectors used, the conversion is non-trivial).
PS: Another question is similar on SO but the author decided to start a framework on his own, i'd prefer to use a "popular" framework
edit: example of a problem when applying classes from less file (mixins): in 960.gs you have the rule:
.container_12 .grid_3{
width:220px;
}
the html (simplified):
<div id="main">
<div id="col1">
</div>
<div id="col2">
</div>
</div>
With LESS, it would be nice to define the layout in the style sheet like that:
#main{
.container_12
}
#col1 {
.alpha;
.grid_3;
}
#col2 {
.omega;
.grid_9;
}
but it will not work (the rule will not apply to col1 and col2) since LESS have no clue about #col1 being in #main (the selector #main #col1 wouln't do the trick, it's pretty complex from the LESS point of view)
Edit 13/07/2012: Twitter Bootstrap is my new favorite choice.
Edit: another one that looks very nice: http://semantic.gs/
I havn't tested it yet, but http://centage.peruste.net/ is a LESS.js css framework.