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:
e poi definire il layout della pagina:
Tutta larghezzaCon spazio a destraColonna a destraFooter
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.