Siti fluidi coi CSS Framework: Inuit.css

Logo di Inuit.cssDopo l’articolo introduttivo sui siti fluidi e i CSS Framework è giunta l’ora di dare una occhiata a un framework vero e proprio. Come dicevo prediligo strumenti agili, leggeri, specializzati e possibilmente fatti in casa. Se scelgo un framework quest’ultimo deve essere essenziale, leggero, flessibile. Inuit.css, ultimo nato nella numerosa e agguerrita famiglia dei Framework CSS, sembra nato apposta per fare di me un uomo felice.

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.

/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	overflow-y:scroll; /* Force scrollbars 100% of the time */
	font-size:100%; /* Use 16px as per http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ */
	font-family:Calibri, "Helvetica Neue", Arial, sans-serif; /* Swap these two lines around to switch between serif and sans */
	font-family:Cambria, Georgia, "Times New Roman", serif; /* Swap these two lines around to switch between serif and sans */
	line-height:1.5;
	background:url(../img/css/baseline.gif) 0 4px #fff;
	color:#333;

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.

/*
These are here, but use them sensibly
*/
.round			{ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
.round > .round	{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.letterpress	{ text-shadow:0 -1px 0 rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.25); } /* Colours may need adjustment */

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

iPhone e iPadIl 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.

Inuit.css - La Homepage

La home page di Inuit.css. Il download è di soli 109kb.

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 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.

  • Filippo

    Ottimo Framework. Ottima recensione.