Nella realizzazione di un template la struttura base è definita dal codice html mentre il suo stile è definito dal css. La conoscenza del css permette di definire ogni aspetto grafico del template, come la dimensione dei box, il loro colore, lo stile sul testo, lo stile dei form e quant'altro abbia a che fare con la grafica. Dunque se si conosce il css si possono creare template quasi di ogni genere. Dico "quasi" perchè non tutto è possibile fare con la combinazione html+css, ad esempio non si possono realizzare animazioni per le quali occorre ricorrere al javascript. Ma un template con grafica "basilare" anche molto curato nei dettagli lo si può realizzare benissimo con il solo html+css.

Fatta questa premessa va anche detto che agire sul css per creare la struttura di base di un template può essere scomodo perchè magari nel realizzare l'impalcatura di un template non c'è bisogno di tutta la flessibilità del css con il quale bisognerebbe lavorare sui box, fare attenzione affinchè i box si affianchino come vogliamo, definire le dimensioni giuste per ottenere la larghezza finale del template che vogliamo avere e così dicendo.

In aiuto a questo ci sono framework come Blueprint (www.blueprintcss.org) che aiutano nel realizzare la struttra grezza del template.

In realtà Blueprint presenta anche molti altri strumenti comodi nella realizzazione dei template, come ad esempio degli stili basilari da applicare al testo, degli stili basilari da applicare ai form, uno stile per rendere il template già pronto per la grafica e altre utilità forse di importanza minore.

Il concetto base di questo framework è di lavorare con delle griglie che realizzeranno l'impalcatura del template finale.

Di default Blueprint lavora su un sistema di griglie fatto di 24 colonne, ciascuna con larghezza di 30px e con uno spazio tra una colonna e l'altra di 10px. Il risultato finale è un template di larghezza di 950px su cui inserire i contenuti. Questa larghezza è stata pensata per template adatti per schermi con risoluzione di 1024x768, cioè la risoluzione più utilizzata.

Per lavorare con questo framework occorre includere, nell'head dell'html, alcuni file css.

I tre più importanti da includere sono: sceen.css, print.css, ie.css. Ma se volessimo avere a disposizione delle classi predefinite per applicare stile ai form o al testo, basterebbe includere rispettivamente anche i file forms.css e typography.css.

Ma vediamo ora in che modo si può realizzare una griglia basilare per il nostro template. Supponiamo che vogliamo avere un template a 3 colonne con un header iniziale dove inserire il logo. Bene questa struttura va inserita sempre nella classe container.

<div class="container">
  <div class="span-24">
    header
  </div>
  <div class="span-4">
    left
  </div>
  <div class="span-16">
    content

  </div>
  <div class="span-4 last">
   right

  </div>
</div>

Così facendo ho ottenuto una griglia composta da un header largo 24 colonne sotto al quale ci sono tre colonne affiancate. La colonna sinistra, lo spazio centrale per il contenuto e la colonna destra.

Ulizzando semplicemente le classi container, span e last ho creato una griglia per un template a 3 colonne.

La classe span serve a definire la larghezza delle colonne, mentre la classe last è utilizzata quando il box non riempie tutte le 24 colonne ed è l'ultimo della riga.

Da questo sceletro potrei applicare uno stile ad ogni box applicando un identificativo al div e richiamandolo nel css.

Ad esempio se volessi colorare lo sfondo dell'header, allora nell'html dovrei definire:

<div id="header" class="span-24">

e nel mio css:

#header {
  background: cyan;
}