Question

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)

Answer 1

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.