BluePrint CSS framework
Con un pò di ritardo vi segnalo BluePrint, un framework CSS che consente la creazione di complessi layout utilizzando una semplice griglia; la prima cosa da fare e scaricare il framework, decomprimerlo (è un file .zip) e caricarlo nella nostra pagina...
Il pacchetto contiene 7 file CSS, vediamo di cosa si tratta:
- screen.css è il file principale del framework che importa gli altri CSS e deve essere incluso in tutte le pagine
- print.css il file che si occupa della versione per la stampa
- lib/grid.css è il file con i valori della griglia, colonne, classi e gestione del layout in genere
- lib/reset.css resetta eventuali valori di default del browser
- lib/buttons.css per creare e personalizzare pulsanti HTML/CSS
- lib/typography.css si occupa della gestione del testo inserendo anche regole tipografica (come l' altezza di riga)
- lib/compressed.css contiene tutto il framework in versione compressa
Ora vediamo come utilizzare la libreria per un nostro progetto (fate riferimento anche al tutorial ufficiale); carichiamo il framework nella nostra pagina HTML (nella <head> come un normale CSS), in questo modo:
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
Fatto, è tutto... in pratica il framework è perfettamente funzionante, dovete semplicemente richiamare le varie classi; in realtà il funzionamento è piuttosto semplice, basta ricordare alcune semplici regole, vediamo le principali.
La griglia di default misura 950 px ed è suddivisa in 24 colonne di 30 px con un margine destro di 10 px. Basterà applicare la classe container ad un contenitore (div) e richiamare poi le singole colonne nello stesso modo, ecco un esempio:
<div class="container">
<div class="column span-24">
<p>Esempio numero 1</p>
</div>
</div>In questo esempio abbiamo inserito un contenitore di dimensione massima, il numero di span, in pratica, indica il numero di colonne presenti e 24 rappresenta l' intera dimensione della classe container. Se vogliamo inserire più colonne basta ricordarsi questo dato; poniamo il caso di voler inserire 3 colonne, una principale e due dedicate alla sidebar (un layout di un blog ad esempio), questo è l' esempio:
<div class="container">
<div class="column span-12">
<p>Prima colonna</p>
</div>
<div class="column span-6">
<p>Seconda colonna</p>
</div>
<div class="column span-6 last">
<p>Terza colonna</p>
</div>
</div>Come vedete basterà ricordarsi che 24 è il numero massimo di colonne (potete rigirare i valori a vostro piacimento); in questo caso faccio notare anche il caricamento della classe last nell' ultima colonna, la classe applica un margine destro pari a 0px (invece dei 10px delle classi "normali" che avrebbero fatto scivolare sotto la colonna). È possibile nidificare all' interno di una colonna altre colonne (rispettando le stesse regole) e la licenza permette la totale personalizzazione dei file.
Un ultima cosa, dimenticavo di segnalare che il foglio di stile dedicato alla tipografia inserisce un' altezza di riga di 18 px e dovete ricordarlo; se vorrete inserire un' immagine nella pagina dovrà avere altezza pari o multipla di 18... io lo scaricherei
|
Permalink |
|
