Tutorial microcss

24 dicembre 2007 css

L’articolo Intricate Fluid Layouts in Three Easy Steps è un tutorial che spiega come usare il ben noto YUI Grids CSS per realizzare un layout particolarmente complesso. Ho voluto verificare se microCSS fosse abbastanza buono per ottenere lo stesso risultato.

Per fare subito un confronto, vedere l’esempio YUI complex layout relativo al citato articolo e il mio esempio microCSS.

Partenza

Prima di tutto, iniziamo inserendo il div #container. Questo racchiuderà l’intero layout. Se decidiamo di impostare una larghezza di pagina dovremo assegnare questa larghezza proprio al div #container

<div id="container"></div>

Passo 1

Nel layout è facile individuare due aree principali: il contenuto a sinistra e una colonna a destra. Divideremo la pagina in due parti con rapporto 80/20 usando le classi .left80 e .right20.

Passo 1

<div id="container">
  <div class="left80"></div>
  <div class="right20"></div>
</div>

Passo 2

Nel blocco di sinistra ci sono 3 sotto-blocchi disposti verticalmente uno sull’altro. Ognuno di essi contiene altri 2 o 3 blocchi. Dato che i sotto-blocchi sono disposti verticalmente, li racchiuderemo dentro a delle classi .wrap. La classe .wrap si occuperà di fare il clear dei float in essi contenuti.

Passo 2

<div id="container">
  <div class="left80">
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
  </div>
  <div class="right20"></div>
</div>

Passo 3

Il primo .wrap contiene 3 colonne di uguale larghezza. Per suddividere il blocco in 3 sotto-blocchi useremo il metodo spiegato in Source Ordered Columns (vedi “The all-float three-ordered-cols method”). Il vantaggio di questo metodo è di non avere più di 2 div allo stesso livello di nidificazione. Questo previene alcuni strani comportamenti con i div flottanti ed è molto robusto.

Nota: 50% of 66% = 33% – avremo 3 × 33% colonne.

Passo 3

La prima suddivisione…

<div id="container">
  <div class="left80">
    <div class="wrap">
      <div class="left66"></div>
      <div class="right33"></div>
    </div>
    <div class="wrap"></div>
    <div class="wrap"></div>
  </div>
  <div class="right20"></div>
</div>

…e la seconda.

<div id="container">
  <div class="left80">
    <div class="wrap">
      <div class="left66">
        <div class="left50"></div>
        <div class="right50"></div>
      </div>
      <div class="right33"></div>
    </div>
    <div class="wrap"></div>
    <div class="wrap"></div>
  </div>
  <div class="right20"></div>
</div>

Passo 4

Il secondo .wrap è più facile, solo 2 colonne. La larghezza della colonna sinistra è il doppio di quella di destra. Il loro rapporto sarà 66/33.

Passo 4

<div id="container">
  <div class="left80">
    <div class="wrap">
      <div class="left66">
        <div class="left50"></div>
        <div class="right50"></div>
      </div>
      <div class="right33"></div>
    </div>
    <div class="wrap">
      <div class="left66">
      <div class="right33">
    </div>
    <div class="wrap"></div>
  </div>
  <div class="right20"></div>
</div>

Passo 5

L’ultimo .wrap contiene 2 colonne di uguale larghezza. Stesso codice di prima ma con rapporto 50/50.

Passo 5

<div id="container">
  <div class="left80">
    <div class="wrap">
      <div class="left66">
        <div class="left50"></div>
        <div class="right50"></div>
      </div>
      <div class="right33"></div>
    </div>
    <div class="wrap">
      <div class="left66">
      <div class="right33">
    </div>
    <div class="wrap">
      <div class="left50"></div>
      <div class="right50"></div>
    </div>
  </div>
  <div class="right20"></div>
</div>

Conclusioni

  1. Il layout contiene 8 aree di contenuto. Per realizzarlo abbiamo usato 14 div, lo stesso numero necessario con il framework YUI.
  2. Un buon web designer assegnerà degli id semantici alle aree di contenuto.
  3. A questo punto il layout è completamente fluido. Per renderlo a larghezza fissa assegnare una dimensione al #container. Esempi:
    #container { width: 760px } #container { width: 64em } etc…
  4. Per impostare uno sfondo al #container bisogna “allungarlo” fino alla fine della pagina. Dato che contiene solo floats, bisogna assegnargli la classe .wrap:
    <div id="container" class="wrap">
  5. Non aggiungere padding, margin o border a queste classi! Cambiare le caratteritiche delle classi del framework può rovinare completamente il layout. Evitate gli hack e assegnate padding, margin o border solo agli elementi contenuti all’interno dei div.