Qual è il miglior quadro griglia da utilizzare con meno css? [chiuso]

Question

Vorrei utilizzare un quadro di griglia (ad esempio blueprint / 960.gs / ...) con MENO (js) ma sembra ci sia qualche problema quando si decide di andare in quel modo:

Ad esempio con progetto: Le cioè hack impedisce di utilizzare le classi contenitore / span-X come mixins Dato che il mista in classi non appariranno negli elementi html. per esempio put

#content { .container; } 

nel foglio di stile .less, l'hack cioè non sarà possibile ottenere applicata (e dare un senso).

Così mi chiedevo se qualcuno già "portato" modello o 960gs a meno css? Guardo su google ma non ho trovato anyting (io ho provato ma visti i IE hack / selettori CSS utilizzato, la conversione non è banale).

PS: Un'altra questione è simile su così, ma l'autore ha deciso di avviare un quadro in proprio, preferisco utilizzare un quadro di "popolare"

modifica: esempio di un problema quando si applica classi da meno di file (mixin): in 960.gs avete la regola:

.container_12 .grid_3{
    width:220px;
}

l'html (semplificato):

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

Con meno, sarebbe bello per definire il layout nel foglio di stile così:

#main{
  .container_12
}

#col1 {
  .alpha;
  .grid_3;
}

#col2 {
  .omega;
  .grid_9;
}

, ma non funzionerà (la regola non si applica alle col1 e col2) dal momento che meno hanno alcun indizio circa # col1 essere nel #main (selettore #main # col1 wouln't fare il trucco, è piuttosto complesso dal punto di vista LESS)

Answer 1

Modifica 13/07/2012:. Twitter Bootstrap è la mia nuova scelta preferita

Edit: un altro che sembra molto bello: http://semantic.gs/

Il havn't ancora testato, ma http://centage.peruste.net/ è un LESS.js framework css.

Answer 2

Non è possibile nido # col1 e # col2 a #main?

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

Dovrebbe dare il #main #col1 {rendered CSS code} uscita

Answer 3

Sto usando Blueprint con meno e funziona meravigliosamente. Solo una cosa che devi fare è. nel vostro make HTML che la base ha div class="container". se si fa proprio questo il resto funziona senza difetti.

rinominare la screen.css a screen.less

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

Answer 4

Mi piace usare il Minore Quadro con {meno}. Proprio perche 'confonde le persone alle estreme conseguenze ...