Layout a griglia con Blueprint
di: Gianluca Brindisi 30 Ottobre 2007
Blueprint è l'ultima novità per quanto riguarda i framework CSS. Oltre a prendersi cura della tipografia e del rendering cross-browser dei vostri progetti vi permette anche di costruire dei robusti layout a griglia.
A differenza di altri prodotti più complessi, come gli strumenti di YUI, la griglia di Blueprint punta sull'immediatezza e sulla semplicità . Nella specifico, la progettazione segue i canoni classici di sviluppo, già ampiamente approfonditi nell'articolo Web design con le griglie, ed integra al suo interno anche la gestione del ritmo verticale. Questo ulteriore aspetto si traduce in un robusto punto di partenza per qualsiasi tipo di progetto.
Installare il framework
Nel momento in cui scrivo, l'ultima versione disponibile di Blueprint è la 0.6 e quindi noi ci atterremo a questa. Rispetto alle versioni precedenti ci sono sostanziali differenze e migliorie.
Scaricate dunque Blueprint 0.6 dalla sua pagina di Google Code e scompattate l'archivio zip.
La cartella che ci interessa è quella chiamata 'blueprint'; all'interno di 'tests' troverete alcuni esempi di quello che è possibile fare.
Adesso create la vostra pagina HTML e tra i tag <head> e </head> inserite:
<link rel="stylesheet"
href="blueprint/screen.css"
type="text/css" media="screen, projection">
<link rel="stylesheet"
href="blueprint/print.css" type="text/css"
media="print">
<!--[if IE]><link
rel="stylesheet" href="blueprint/lib/ie.css" type="text/css"
media="screen, projection"><![endif]-->
Essendo stato progettato per più scopi, Blueprint è uno strumento che offre soluzioni pratiche per diversi tipi di problemi. Come si evince dai richiami qua sopra, è presente, tra le altre cose, sia la gestione del foglio di stile per la stampa sia quella per la compatibilità cross-browser con IE. Ai fini dell'articolo tutte queste funzionalità non sono rilevanti, ma sono state comunque installate per motivi pratici.
Quello che a noi interessa veramente è grids.css, che potete trovare in 'blueprint/lib/'
La griglia
Di default la griglia è larga 950px ed è suddivisa in 24
colonne larghe 30px con 10px di margine tra una e l'altra. La parte di
codice CSS che si occupa di gestire l'intera struttura è la classe
.container che, come suggerisce il nome, va applicata al div che
conterrà tutto il layout:
.container {
width: 950px;
margin: 0 auto;
}
<div class="container"></div>
È possibile modificare a nostro piacimento il numero
di colonne (e
quindi la larghezza) della griglia cambiando il valore width, con
questo calcolo:
nuovowidth = (numero colonne * 40) - 10
Ultimi articoli CSS
|
CSS3 Border-radius e Box-shadow su Internet Explorer con CSS3PIE |
Guide CSS
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso Webmaster base20 Febbraio 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |