Quel est le meilleur cadre de grille à utiliser avec MOINS css? [fermé]

Question

Je voudrais utiliser un cadre de grille (par exemple Blueprint / 960.gs / ...) avec MOINS (.js) mais il semble qu'il ya quelques problèmes lorsque vous décidez d'aller de cette façon:

Par exemple avec plan: Les hacks-à-dire stylesheet empêche d'utiliser les classes contenant / span-X comme mixins étant donné que les classes mixtes en ne figureront pas dans les éléments HTML. par exemple mettre

#content { .container; } 

dans votre .Moins stylesheet, le hacks-à-dire ne sera pas appliquée (et de sens).

Alors je me demandais si quelqu'un déjà « PORTAGE » plan ou 960gs à moins css? Je regarde sur Google mais ne l'ai pas trouvé anyting (je me suis essayé, mais étant donné les sélecteurs hacks / IE utilisés css, la conversion est non trivial).

PS: Une autre question est similaire sur le SO, mais l'auteur a décidé de lancer un cadre seul, je préfère utiliser un cadre « populaire »

modifier: exemple d'un problème lors de l'application des classes de fichiers moins (mixins): en 960.gs vous avez la règle:

.container_12 .grid_3{
    width:220px;
}

le html (simplifié):

<div id="main">
  <div id="col1">
  </div>
  <div id="col2">
  </div>
</div>

Avec moins, ce serait bien de définir la mise en page dans la feuille de style comme ça:

#main{
  .container_12
}

#col1 {
  .alpha;
  .grid_3;
}

#col2 {
  .omega;
  .grid_9;
}

mais il ne fonctionnera pas (la règle ne sera pas applicable à col1 et col2) depuis moins ont pas la moindre idée de # col1 être dans #main (le sélecteur #main # col1 wouln't faire l'affaire, il est assez complexe de la point de vue moins)

Answer 1

Modifier 13/07/2012. Twitter Bootstrap est mon nouveau choix préféré

Edit: un autre qui semble très agréable: http://semantic.gs/

Je havn't encore testé, mais http://centage.peruste.net/ est un LESS.js cadre css.

Answer 2

Vous ne pouvez pas imbriquer # col1 et # col2 à #main?

#main {
   #col1 {.alpha; .grid_3;}
   #col2 {.omega; .grid_3;}
}

devrait donner à l'#main #col1 {rendered CSS code} de sortie

Answer 3

J'utilise Blueprint avec moins et il fonctionne à merveille. Une seule chose que vous devez faire est. dans votre marque HTML que le div de base a class="container". si vous faites juste cela, le reste ne fonctionnera sans aucun problème.

renommer votre screen.css à screen.less

@import "screen.less";
#header {     
    .span-24; .last; // Now, Have Fun! :D
         }

Answer 4

Je aime utiliser le cadre moins avec {} moins. Juste parce qu'il confond les gens à l'extrême ...