Guida al framework CSS BluePrint
Il problema
Disegnando pagine con HTML e CSS ben presto ci si trova a risolvere gli stessi problemi, problemi che
con il proliferare dei browser tendono ad aumentare nel corso del tempo. Il primo approccio è quello
di creare delle convenzioni che permettano di velocizzare lo sviluppo ma poi ci rende conto che la
cosa migliore è quella di affidarsi ad un vero framework CSS.
Ovviamente sviluppare un proprio framework oltre che ad essere complesso è anche molto costoso. Il
continuo evolvere sia degli standard e soprattutto di come gli standard vengono interpretati
dai vari browser, rende decisamente molto complesse la creazione e la manutenzione.
Alcuni framework hanno ottenuto molta popolarità degli sviluppatori
- Layout Gala è rivolto soprattutto ad affrontare il problema
del layout del sito. Uno ottimo esempio di come separare contenuto e formattazione ma a volte molto complesso
proprio per riuscire nella sfida di non modificare assolutamente i contenuti. A volte invertendo l'ordine di
contenuto e menù si potrebbe risolvere il problema in maniera sicuramente più semplice.
- YUI Base CSS è invece un framework sicuramente
di altissimo livello, tenendo conto che può essere utilizzato insieme il set Javascript della Yahoo User Interface
library. L'unica pecca sicuramente è di essere decisamente complesso e non così ben documentato come meriterebbe.
- BluePrintCSS è il nostro preferito ed utilizzato, tra l'altro,
per costruire le pagine di questo sito. La sua eleganza e semplicità è pari solo alla sue efficacia.
Come iniziare con BluePrintCSS
Utilizzare BluePrintCSS è facile. Come prima cosa è si devono
scaricare i file e copiarli nella propria directory CSS.
Poi è ovviamente necessario aggiungere i link nel proprio header
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
<link href="css/blueprint/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/blueprint/lib/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Ha questo punto si è pronti a cominciare tenendo conto di una sola cosa importante. Grazie a
questi CSS il layout del proprio sito è impostato (come default ma si può cambiare) con 24 colonne
sulle quale possiamo distribuire i nostri contenuti.
Un piccolo esempio per cominciare e rendere tutto più facile
<div class="container">
<div class="column span-24 last">Header</div>
<div class="column span-4">sinistra</div>
<div class="column span-16">Contenuto</div>
<div class="column span-4 last">destra</div>
</div>
Sicuramente facile ed intuitivo. Ora qualche consiglio prima di cominciare
Qualche trucco
- Le immagini possono essere di qualsiasi grandezza ma se sono alte multipli di 18 pixel la vostra pagina sarà perfetta.
- A partire dalla versione 0.7 la classe column non è più necessaria
- Esistono molti plugin aggiuntivi (cerca blueprint plugins) ma 4 sono inclusi: buttons, facy-type, link-icons e rtl.
Per saperne di più apri la directory plugins dopo avere scaricato il pacchetto blueprint.