It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.

A prima vista sembra molto ben fatto. Per tutte le informazioni e il download visitate la bella home page del progetto.

Flessibilità e qualità prima di tutto

Inuit.css è pronto all’uso, se siete di corsa e non avete esigenze particolari potete usarlo così com’è. Quando serve è facile adattarlo al nostro progetto, soprattutto grazie all’alta qualità del codice sorgente, commentato molto bene. E’ proprio la cura che l’autore ha dedicato alla documentazione l’elemento chiave che ci consente di intervenire rapidamente, eliminando le parti superflue o ritoccando il codice ove necessario.

Qui sopra vedete uno snippet tratto dal foglio di stile originale. Notate come l’autore si sia preoccupato di fornire indicazioni su come organizzare la gerarchia dei font. Ben fatto!

La potenza è nulla senza controllo

Difficilmente Inuit.css prende l’iniziativa, preferisce lasciarla al designer. Prendiamo gli elementi base di HTML5 e CSS3. Inuit.css li supporta ma li isola in classi dedicate che useremo all’occorrenza.

La scelta del basso profilo è apprezzabile. Lascia il controllo nelle nostre mani, ma corre il rischio che – soprattutto al primo impatto – il framework sembri meno ricco rispetto ad altre soluzioni. In effetti non è sulla ricchezza che punta Inuit ma su flessibilità, estensibilità e… mobilità.

Tablet, smartphone e non solo

Il supporto per l’attributo @media consente a Inuit di ridefinire dinamicamente gran parte delle impostazioni in base al dispositivo (tablet, smartphone, stampante) che consuma la pagina. Il Grid System adottato deriva dal capostipite 960 Grid System (vedi in proposito l’articolo precedente), supporta matrici (grid) a 12 e 16 colonne e implementa un ingegnoso marchingegno che evita l’inserimento della classica class=end nell’ultima colonna.

A differenza della Tiny Fluid Grid vista la volta scrosa, Inuit è un Framework vero e proprio e supporta ben più della sola Grid. Sono presenti impostazioni predefinite e ben fatte per tutti gli elementi più comuni di una pagina HTML: header, paragrafi, liste numerate e non, tabelle, form, citazioni, link, immagini. Non manca una implementazione del Eric Meyer CSS Reset e il supporto per la modalità debug che rende visibile la grid sullo sfondo. Una occhiata alla pagina demo e soprattutto al suo sorgente è sufficiente per rendersi conto di quanti sono gli stili che Inuit.css ci mette a disposizione.

Giovani di belle speranze

Inuit è il nuovo arrivato, ha solo una ventina di giorni ed è in revisione continua. E’ giovane come il suo autore, il ventenne Harry Roberts (l’età non tragga in inganno, Harry è la mente che si cela dietro CSS Wizardry). Come tutti i giovani di belle speranze Inuit guarda al futuro e se ne frega allegramente del passato: supporta Internet Explorer a partire dalla versione 7 (update del 24.5: la release 1.5 introduce un supporto base per le grid in IE6).

Dovrà sgomitare un bel pò per conquistarsi uno spazio in una nicchia già affollata da una concorrenza agguerrita. Ha tutte le carte in regola per sfondare, prova ne è il fatto che a pochi giorni dal lancio qualche sito qui e là ha già cominciato ad adottarlo.

Se scegliete di usare Inuit nei vostri progetti fatemelo sapere. Chissà, potrebbero finire dritti dritti nella Web Gallery del sito ufficiale.

Il Grid Design e l’era dei CSS Framework

L’avvento dei CSS Framework si deve (principalmente) alla necessità di soddisfare l’esigenza di fluidità. Il capostipite, se non in ordine cronologico senz’altro per l’influenza che ha avuto, è il 960 Grid System. Altri prodotti famosi, per citarne solo un paio, sono Blueprint e Emastic. Questi framework hanno in comune l’obiettivo di velocizzare creazione, gestione e manutenzione dei fogli di stile ma se andiamo al nocciolo della questione ci accorgiamo che tutti si basano sul concetto chiave di Grid Design:

Una griglia tipografica è una struttura bidimensionale composta da una serie di guide verticali e orizzontali intersecanti (matrice) usata per organizzare il contenuto della pagina. La griglia offre una traccia sulla quale il designer può organizzare testo e immagini in maniera ordinata e razionale (Wikipedia)

Niente di nuovo, i tipografi hanno usato questa tecnica per secoli. Il Grid Design in declinazione web è fluido: le colonne (e gli spazi tra le colonne) che compongono la matrice sono capaci di adattarsi alla risoluzione dell schermo.

Gran parte dei CSS Framework non si limitano a implementare versioni più o meno sofisticate del Grid System ma offrono una serie di servizi aggiuntivi nel tentativo di risparmiare al designer i compiti più ripetitivi e tediosi. Non sempre ci riescono. Ogni sito ha esigenze specifiche e ogni designer abitudini consolidate. E’ difficile che una soluzione standard sia l’ideale per ogni esigenza. Spesso preferisco la via di mezzo: strumenti agili che consentono di portare a casa rapidamente il risultato senza aggiungere (molto) più del necessario.

In questa mini-serie di tre articoli prenderò in esame tre diverse soluzioni che implementano il Grid Design e che ci permettono di implementare, con diversi gradi di complessità (e numero di funzionalità), pagine web fluide.

Tiny Fluid Grid

Se non altro amerete questa soluzione a causa del suo design: il sito è oggettivamente splendido. E facile da usare. In effetti Tiny Fluid Grid non è un CSS Framework vero e proprio ma una semplice soluzione interattiva che vi consente, agendo su tre semplici regolazioni (numero di colonne, spazio tra le colonne e larghezza dell’area client), di configurare online la vostra CSS grid. Il pulsante Preview offre una anteprima (anch’essa interattiva) della grid. L’unica altra opzione disponibile è il Download. Otterrete un archivio compresso che contiene due files: il foglio di stile grid.css e un index.html che contiene un esempio d’uso della grid appena creata:

Una occhiata al foglio di stile ci consente di capire la struttura della grid

Una classe per ogni larghezza di colonna. Poiché larghezza e margini delle colonne sono espressi in percentuale la nostra grid si adatta alla risoluzione dello schermo, con i limiti imposti dagli attributi min-width e max-width. L’implementazione lato HTML è banale (tralascio le parti non rilevanti):

La nostra grid è contenuta in un div di classe “container”. Le colonne sono a loro volta dei div. Per ottenere più colonne nella stessa riga dobbiamo assicurarci che la somma dei numeri contenuti nel nome di ogni classe (grid_x) sia uguale al numero di colonne di cui è composta la grid. Nel nostro caso la seconda riga è composta da tre div grid_4 (4×3=12); la terza riga da due colonne: grid_3 e grid_9 (3+9=12). Semplice no? Naturalmente possiamo ritoccare il foglio di stile come vogliamo, adattandolo alle nostre esigenze.

Nel prossimo articolo della serie affronteremo un CSS Framework vero e proprio, anche questo snello e semplice da usare. Se ancora non l’avete fatto abbonatevi al feed RSS per non perdere la prossima puntata, oppure iscrivetevi alla mailing list (riquadro in alto a destra). Mi raccomando!