MicroCSS, un framework minimalista

Data: 07 aprile 2007Categoria: css

Dopo aver visto alcuni framework css ho voluto provare l'implementazione di un framework generalista, che potesse servire al solo scopo di definire la struttura di una pagina. Piuttosto che costruire una complessa infrastruttura di regole ho cercato di trovare un set limitato di regole che mi permettesse soprattutto flessibilità.

Aggiornamento del 8/3/2008: è disponibile una nuova versione: microCSS v3

Il framework si basa su classi generiche dimensionate in percentuale per adattarsi a qualsiasi larghezza del layout, sia fisso che fluido. Le classi hanno width che vanno da 20% a 80% e sono state scelte per pensare alla suddivisione della pagina in termini di frazioni (1/5, 1/4, 1/3, ecc.). Ogni classe è stata poi duplicata per avere un allineamento a destra o a sinistra.

width della classe frazione di pagina
20% 1/5
25% 1/4
33% 1/3
50% 1/2
66% 2/3
75% 3/4
80% 4/5

Annidando opportunamente le classi è possibile ottenere facilmente layout da 2 a 5 colonne molto robusti e nei quali è possibile stabilire quale colonna sarà la prima ad apparire nel sorgente HTML, con i ben noti vantaggi in termini di accessibilità e indicizzazione dei motori.

L'ispirazione per questo metodo mi è venuta leggendo Source Ordered Columns (Position Is Everything) nel quale viene descritto una tecnica alternativa per realizzare il layout a 3 colonne. Estendendo la tecnica a più elementi innestati diventa facile realizzare layout fino a 4 o 5 colonne, anche se in realtà non ci sarebbe un limite teorico.

l secondo punto che mi stava a cuore era la possibilità di impostare diversi tipi di layout in diverse sezioni della pagina. Si può desiderare ad esempio una prima parte a 2 colonne asimmmetriche seguita da una a 4 colonne uguali. Per fare questo, dato che si utilizzano dei float per il layout, bisognava per forza prevedere un elemento che facesse il clear tra una sezione e l'altra. Questo avrebbe obbligato ad inserire nel sorgente html un elemento estraneo che non aveva nessun altro scopo.

La soluzione è venuta leggendo Clearing a float container without source markup (Position Is Everything) che permette, sfruttando solo i CSS, di "pulire" i float in maniera elegante ed efficace.

Per implementare tale tecnica è stata impostata una classe .wrap da assegnare ad un div che racchiuda ogni diversa sezione

Per finire è stato fatto un reset globale dei margin e padding per evitere incongruenze tra un browser e l'altro a causa delle regole di default che ogni browser già implementa. Facendo riferimento a Undoing html.css (Tantek Celik), Global White Space Reset (Left Justified) e YUI Reset CSS (Yahoo! UI Library) ho preso un po' dall'uno e un po' dall'altro per fare la mia personale versione di reset.

Per convenzione ho aggiunto un id #container per racchiudere il contenuto dell'intero documento. In caso di scelta di un layout a larghezza fissa, #container si occuperà automaticamente di centrare la pagina nella finestra del browser.

È disponibile una pagina di esempio con layout da 2 a 5 colonne (tutti nella stessa pagina) di cui si potrà consultare il codice, oppure si può scaricare il file microcss.zip (meno di 4KB) che contiene il framework, sia in versione normale che in versione compressa senza commenti, più la pagina di esempio.

Nota: Nel css sono presenti alcuni hack per supplire alla deficienza di Internet Explorer nel calcolo delle percentuali, cosa che provocherebbe risultati pessimi in caso di layout fluidi. Questo purtroppo inibisce la validazione del css. Volendo si possono spostare gli hack in un css a parte da includere con i commenti condizionali e permettere così la validazione.

Categorie

Archivi