Links

Google BluePrintCSS tutorial

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

Scaricate e stampate subito il Quick Reference
Non dimenticate di aggiungere la classe last all'ultima colonna di destra
Controllate che la somma delle colonne sia 24
Proseguite leggendo il tutorial