Solitamente quando dovevo realizzare un layout per pagine web o utilizzavo un template oppure cercavo info su come creare
un layout consistente con i div. Oltre ad andare incontro ai problemi di compatibilità tra i diversi browser e alla solite problematiche di non perfetto allineamento si perdeva parecchio tempo nel raffinare il tutto. Per Muse Flickr Gallery ho deciso di provare un framework css per i layout della pagina: la scelta è ricaduta su BluePrint Css.
Prima di tutto è necessario inserire i link ai css nell’header della pagina:
<!--[if IE]>
<link rel="stylesheet"
href="css/blueprint/lib/ie.css" mce_href="http://blog.duea.info/wp-admin/css/blueprint/lib/ie.css"
type="text/css" media="screen, projection">
<![endif]-->
e poi definire il layout della pagina:
<div class="container span-22"> <div class="column span-22"> Tutta larghezza </div> <div class="column span-16 append-1"> Con spazio a destra </div> <div class="column span-5 last"> Colonna a destra </div> <div class="column span-22 small quiet"> Footer <div> </div> </div> </div>
Definire il layout della pagina è semplicissimo, basta utilizzare le classi messe a disposizione del framework.
La classe container è composta da 24 colonne, ma è possibile specificarne un numero diverso utilizzando la classen span-{n} dove n è compreso tra 1 e 24.
Per ogni colonna che si vuole aggiungere è sufficiente utilizzare la classe column e la grandezza desiderata ed è importante ricordarsi di aggiungere all’ultima colonna la classe last in modo da avere i bordi corretti.
Infine il framework mette a disposizione classi aggiuntive sia per la generazione del layout sia per le impostazioni tipografiche del contenuto. Un esempio è la classe append-1 che aggiunge una colonna vuota alla destra del div attuale. Per le impostazioni tipografiche possiamo utilizzare le classi small e quiet per definire il piede della pagina.
La documentazione è buona, ma una lettura veloce alle classi css presenti nel framework permette un approccio migliore e un più facile utilizzo.