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.
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:
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).
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.
5 commenti
Ottimo spunto di approfondimento, avevo già sentito parlare di framework css ma non ne avevo mai inquadrato l’uso e le potenzialità, nel post sono stati chiariti alcuni concetti base che sicuramente mi danno uno stimolo per inziare a documentarmi.
dagli esempi sul sito non i pare il massimo in termini di accessibilita’, nel senso che le pagine non sono per niente ridimensionabili al ridimensionamento della finestra del browser
giusto?
@AndreaZ: Ti sbagli. Il corpo del carattere è completamente ridimensionabile visto che tutte le dimensioni dei caratteri si basano sull’unità di misura em.
Non avevo ancora sentito parlare di questo framework, sicuramente da provare.
Cristian.
Manualinux il Manuale su Linux http://www.manualinux.com
.. così di primo acchito non sembra male.. unalimitazione salta all’occhio però.. ameno che non sia portabile anche su xhtml, mi sembra si usi html 4.
ciao!
.