Le basi del framework inuit.css

Per la realizzazione del layout ci siamo affidati al framework inuit.css, una creazione di Harry Roberts. Per le funzionalità che offre e per la logica del suo funzionamento ci è parsa la soluzione più efficace.

Inuit.css è basato su Sass ed offre ben più che gli strumenti e il codice per strutturare un layout. Ci siamo presi la briga di compilare il CSS estrapolando solo le parti dedicate alla griglia, abbiamo modificato la denominazione delle classi per renderla meno ostica (ai non anglofoni!) e ne è venuto fuori questo foglio di stile. Potrete riutilizzarlo a piacimento ogni volta che avrete la necessità di creare in pochi passi un solido layout. Vediamo come funziona.

Le basi di inuit.css

Un layout basato su inuit.css ha questa caratteristiche di base:

• usa box-sizing: border-box;
• crea una griglia fluida con larghezze espresse in percentuale;
• ha uno spazio tra gli elementi della griglia (gutter) fisso ed espresso in pixel;
• tale spazio è generato con il padding e non con i margini;
• è fondato sul concetto di proporzioni e non di colonne;
• supporta le griglie annidate;
• supporta Internet Explorer a partire dalla versione 8;
• incorpora meccanismi che lo rendono adattissimo al responsive design.

Per strutturare il layout basta seguire questi semplici passi.

1. Per ogni blocco orizzontale del layout (riga), inseriamo un div con classe .gc (grid container):

<div class="gc">
 [...]
</div>

2. Ogni elemento della griglia è rappresentato da un div con classe .grid:

<div class="gc">
 <div class="grid">
 [...]
 </div>
 <div class="grid">
 [...]
 </div>
 <div class="grid">
 [...]
 </div>
</div>

3. Ogni elemento della griglia va accompagnato da un'altra classe che esprime la sua larghezza, o meglio, la sua proporzione in larghezza all'interno della riga. Tale proporzione ha la forma di una frazione e ciascuna proporzione è associata nel CSS ad una larghezza in percentuale. Nella versione da noi modificata, le classi per la definizione delle proporzioni sono espresse con il prefisso span-.

<div class="gc">
 <div class="grid  span-1-3">
  [...]
 </div>
 <div class="grid  span-1-3">
   [...]
 </div>
 <div class="grid  span-1-3">
   [...]
 </div>
</div>

Nel codice, la classe span-1-3 equivale a '1/3 della larghezza totale'. Secondo questo schema, dunque, span-2-4 equivale a '2/4 della larghezza totale', span-3-5 a '3/5 della larghezza totale', e così via. Come si può osservare studiando il codice del foglio di stile, l'autore ha previsto un numero enorme di combinazioni, fino a coprire le frazioni in dodicesimi!

4. La griglia di inuit.css è fluida. Significa che ogni grid container assumerà, se non limitato, una larghezza pari al 100% della finestra del browser. Se si vuole limitare la larghezza, basterà racchiudere tutti i div con classe .gc in un elemento contenitore per il quale si fisserà la larghezza massima con max-width.

Fin qui la teoria, nella prossima lezione vedremo da vicino una serie di esempi pratici.