Good Ideas

Blueprint: arriva il framework CSS

Sono capitato per sbaglio sull’homepage di Bluprint e fin dall’inizio mi ha interessanto l’argomento: un framework per CSS. Non ne avevo mai sentito parlare e allora ho speso un paio d’ore a capire cosa fosse di preciso. Ora cerco di spiegarvelo.

blueprint, un framework per css

Cos’è BluePrint

Blueprint è un framework CSS che guida i web designer a costruire una pagina web con una solida struttura, che dispone gli elementi su una comoda griglia, che fornisce un elegante set tipografico, che genera un foglio di stile per la stampa e che estende le sue funzionalità con alcuni utili plugin. Qui sotto trovate un esempio di pagina generata con BluePrint:

forms generate con blueprint

Ad oggi siamo arrivati alla versione 0.7 e devo dire che è sufficientemente completa per creare una buonissima struttura per una pagina web. Il creatore è Olav Bjørkøy che, ispirato da un articolo apparso su AListAPart, ha cominciato a lavorare sul progetto che da lì a poco sarebbe diventato BluePrint. Per chi utilizza Ruby on Rails, questo framework sembra essere fatto ad-hoc (da notare le classi .notice, .error e . success, native in RoR).

Impostare il framework BluePrint

Ora vi mostrerò i passi per poter cominciare a utilizzare BluePrint sul vostro progetto. Io utilizzo un server dedicato. Quindi utilizzerò una connessione SSH per lanciare alcuni comandi di sistema.

Se non disponete di un accesso SSH alla vostro sito web, allora scaricate Blueprint sul vostro pc e copiate via FTP i fogli di stile (blueprint/screen.css, blueprint/print.css e blueprint/ie.css) nella vostra cartella contenente i CSS (magari in una sottocartella appositamente creata, p.e. css/blueprint/) . Se invece disponete di accesso SSH, proseguite nella lettura.

Dopo aver preparato l’ambiente per ospitare un progetto (virtual host su apache, impostazioni del dominio, ecc…), è necessario scaricare i file sorgente. Facciamolo attraverso l’SVN e in qualsiasi punto del filesystem, io l’ho fatto nella home del mio utente.

svn checkout http://blueprintcss.googlecode.com/svn/blueprint/trunk/ blueprint

Bene, adesso disponiamo di tutto il codice necessario. Configuriamo il file delle impostazioni (settings.yml) in questo modo:

cd /blueprint/lib 
cp settings.example.yml settings.yml 
vi settings.yml 

Ora modifichiamo alcuni dati relativi al project1. Impostiamo il path di output in modo che corrisponda alla cartella contenente i fogli di stile nel nostro nuovo progetto (p.e. path: /var/www/vhosts/blueprint.it/httpdocs/css/blueprint). Possiamo indicare un eventuale namespace da appendere ai comandi del framework. Per iniziare lasciamolo vuoto.  Ci rimane da specificare gli altri fogli di stile custom e le dimensioni della griglia.

Siamo pronti a generare i fogli di stile del framework (per poter procedere al prossimo step è necessario disporre dell’interprete Ruby). Lanciamo pertanto il seguente comando:

ruby compress.rb -p project1

Questo comando assembla insieme alcuni fogli di stile e li comprime producendo: screen.css, ie.css e print.css posizionandoli correttamente come indicato nel file di impostazioni. Inoltre aggiusta i path dei file di prova nella cartella tests/.

Bene, la parte complicata è ora finita.

Utilizzare BluePrint

Vi chiedere ora come si può utilizzare un framework per CSS. La risposta è semplice: includere i fogli di stile del framework nell’header nelle nostre pagine web. Quindi:



Ora possiamo cominciare a definire il corpo della pagina. Nel tag BODY scriviamo queste righe per cominciare a prendere confidenza con BluePrint:

Header
Left sidebar
Main content
Right sidebar

Blueprint funziona proprio così. Le direttive non sono altro che classi del foglio di stile che abbiamo incluso. Quindi ci sono classi "riservate" dal framework. Eccovene qualcuna:

  • container: il contenitore che contiene tutte le colonne
  • box: crea un box
  • last: indica l’ultima colonna
  • border: disegna un bordo sul lato destro della colonna

La logica a griglia

La logica di funzionamento è molto semplice. Si divide lo spazio della pagina in una griglia formata alternativamente da celle (column_width) e spaziatori (glutter_width). Ogni oggetto viene posizionato correttamente su questa griglia. Per creare una colonna di testo di 10 celle, creaiamo un elemento DIV con classe span-10. A questa possiamo affiancarne un’altra di dimensioni 12 celle, quindi di classe span-12. Infine ne possiamo fare un’altra ancora di 12 celle, span-12. Per questa, dobbiamo anche indicare la classe last, visto che è l’ultima (per default sono 24 celle, ma si possono modificare nel file di configurazione descritto sopra).

griglia di blueprint

Parliamo di tabelle, colonne e celle ma attenzione a non confonderle con i tag html relativi alle tabelle: BluePrint è tableless e completamente governato dai fogli di stile.

Risorse e approfondimenti

Ora che vi ho spiegato i concetti di base di BluePrint, potete approfondire la vostra conoscenza utilizzando le risorse e i tutorial che trovate in rete. Il mio consiglio è di cominciare ad analizzare gli esempi che si trovano sul pacchetto che si scarica, magari utilizzando l’accoppiata FireBug/Firefox per vedere in diretta il codice HTML e CSS.

Inoltre è interessante il cheat sheet che fornisce l’autore: in un’unico foglio PDF, tutto ciò che si deve sapere riguardo BluePrint.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *