CSS  »  Articoli  »  CSS Template e layout 

Passiamo ora ad affrontare il problema del padding. La soluzione che ci offre Blueprint è quella di annidare un div con applicata la classe .box ad una zona del nostro layout, in questo modo (esempio):

Tramite l'applicazione di .box ad un div interno, si va a creare un padding che non va a concorrere nel box model degli elementi strutturali del layout. In questo modo siamo salvaguardati dal rischio di visualizzare il nostro lavoro in modo disorganico e disomogeneo su browser differenti. Il rovescio della medaglia è quello di ottenere, in caso avessimo molte zone necessitanti di un padding, un risultato affetto da divite.

Ultimo elemento da descrivere è quello che riguarda le horizontal rules <hr>. Ci vengono messe a disposizione due soluzioni per implementare un <hr> all'interno di una colonna:

• La prima, che non necessita di markup aggiuntivo ed è autmaticamente invocata, genera una linea orizzontale di 0.1em di altezza che si preoccupa di mantenere il ritmo verticale.
• La seconda, da invocare tramite la classe .space, crea sempre una linea orizzontale rispettosa del ritmo verticale ma invisibile (di colore bianco, nello specifico).

Portiamo avanti il nostro esempio:

Note e conclusioni

Giunti alla conclusione è doveroso fare alcune considerazioni finali. La prima riguarda la semplicità  di Blueprint: il framework è davvero immediato e per imparare ad utilizzarlo basta leggere i commenti nei relativi file. Questa semplicità  va a cozzare contro la principale critica che viene rivolta a questi strumenti, cioè che, per poterci lavorare, si è costretti ad imparare metodologie estranee allo sviluppo canonico con i fogli di stile. In realtà l'unica cosa che potrete vedere è solo del codice CSS scritto bene, tutt'altro che diseducativo.

La seconda considerazione riguarda la flessibilità . Ogni singola classe incontrata in questo articolo è facilmente modificabile e deve esserlo secondo le necessità  dei vostri progetti. Questo è particolarmente vero per le classi che aggiungono dettagli non strutturali come bordi, linee orizzontali e colori. Non accontentavi di utilizzare gli strumenti che Blueprint vi mette a disposizione così come sono, ma sentitevi assolutamente liberi di piegarli alle vostre esigenze.

Detto questo vi lascio come di consueto alcuni link di approfondimento:

• Blueprint Grid CSS Generator, è un comodissimo tool che vi permette di creare una griglia delle dimensioni che preferite.
• Blueprintcss @ Google Code, la homepage su Google Code di Blueprint. Potete trovarci le ultime versioni, alcuni esempi e news sul progetto.
• Bjorkoy.com, è il blog personale di Olav Bjorkoy ideatore di Blueprint.
• Blueprint CSS Mailing List, è il gruppo di discussione ufficiale di Blueprint (in inglese).

Gli esempi sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter