Blueprint: un framework CSS
Lunedì 3 Settembre 2007 - 10:13
di Alessandro Fulciniti
È senza dubbio una delle uscite più notevoli e discusse dell’estate per i fogli di stile questo Blueprint, un framework CSS. Riporto tradotta l’introduzione di Olav Bjorkoy, autore del progetto:
Blueprint è una libreria CSS che ha lo scopo di ridurre i tempi di sviluppo CSS.
Fornisce una solida base su cui realizzare i tuoi progetti, con una griglia semplice
da usare, una tipografia sensata e un foglio di stile per la stampa.Ecco un sito di esempio realizzato con BP, una dimostrazione della griglia e una dimostrazione della tipografia. Il tutorial veloce
è inoltre un buon punto di partenza. […]Ecco le caratteristiche:
- Una griglia facilmente personalizzabile
- Tipografia sensata
- Dimensionamento dei font relativo ovunque
- Una baseline tipografia
- Reset perfetto con i CSS
- CSS per la stampa
- Versione compressa
- Niente fronzoli
Blueprint non è il primo framework CSS: sarà nota ai più YUI, la libreria di Yahoo! che include le tanto note Grids. Ed è proprio per eliminare la complessità di YUI che nasce Blueprint, come afferma l’autore nel post di lancio.
Blueprint sta facendo molto discutere nella blogosfera. Per alcuni, come Khoi Vinh e Mark Boulton, si tratta di una cosa positiva che non può far altro che ridurre i tempi e agevolare il processo di sviluppo, oltre ad essere uno strumento di precisione per quanto riguarda griglie, tipografia e ritmo verticale. Due opinioni contrarie invece sono quelle di Kyle Neath e di Jon Christopher: entrambi sostengono che gli svantaggi sono superiori ai vantaggi che può portare l’uso di framework CSS.
Personalmente un opinione in merito non ce l’ho ancora: ho da poco scaricato l’ultima versione di Blueprint e in questi giorni procederò con il suo studio, in vista di un articolo per HTML.it. Qui sul blog nei prossimi giorni pubblicherò alcuni link a risorse e tutorial su questo framework.
Concludo con le domande di rito per aprire i commenti: l’avete già provato? Lo usereste? Che ne pensate? A voi la parola!
Commenti
1
Ciao Alessandro,
L’ho usato e qualche parere l’ho espresso nel mio blog.Lo trovo utile, il problema principale (che si ha con tutti i framework) è che alla fine ci si ritrova con un po di codice inutile. Però Blueprint è talmente semplice e leggero che non ci vuole molto a ripulire. A tal proposito uso un’estensione molto carina per Firefox che trova i selettori inutilizzati in una pagina.
Ti segnalo anche Tivoli, non è un framework ma un rendering layer, come lo chiama l’autore. Unito a grid.css di Blueprint ne esce fuori un robusto punto di partenza per qualsiasi progetto.
2
Interessante è l’idea, ma trovo un po riduttivo e costrittiva la griglia. Sono sicuro che il progetto però migliorerà se riusicranno a introdurre maggiore flessibilità, a partire dai liquid layouts.
Intanto ne sto usando porzioni di codice nei progetti, comodissimo. ;)
3
@ Laburno
> uso un’estensione molto carina per Firefox
ci dici il nome?
grazie :o)
Rob# - postato da Roberto - 03 Settembre 2007 - 12:07
4
Credo possa essere un grosso limite alla creatività e alla sperimentazione, se mai lo dovessi usare lo farei solo per progetti più classici.. poi vuoi mettere la soddisfazione di un progetto che funziona con le sue gambe??
5
Laburno, grazie per l’intervento e complimenti per il mini-tutorial su Blueprint.
Ho contattato stamattina l’autore di BP per chiedergli se ci sono cambiamenti in vista, e mi ha detto che entro fine settimana dovrebbe essere pronta la nuova versione.
In quanto a Tripoli, c’è un post a parte già pronto per essere schedulato ;-)
# - postato da Alessandro Fulciniti - 03 Settembre 2007 - 12:29
6
@caruso_g
Riprogettare la griglia è un processo abbastanza veloce. Esiste un tool che si chiama Blueprint CSS Grid Generator (puoi googlare per trovarlo) molto comodo. Nella versione 0.5 attuale poi, hanno aumentato le colonne a 24, incrementando le possibilità di progettazione. Per quanto riguarda i layout liquidi potrebbe essere interessante sperimentare qualcosa (non c’ho provato sinceramente).@ Roberto.
Hai ragione, scusami. Si chiama Dust-Me, e lo puoi trovare qui:
http://www.sitepoint.com/dustm.....selectors/@Alessandro
Grazie dei complimenti :)
La 0.6 già a fine settimana? Blueprint cresce velocissimo. Mi metto in attesa per nuove news allora.Saluti.
7
Ciao,
volevo segnalarvi un altro frameworks css: YAML http://www.yaml.de/en/.Qualcuno ha lavorato con entrambi in modo da evidenziare i pro/contro?
# - postato da Daniele - 03 Settembre 2007 - 14:46
8
@Laburno
Ho visto già, spulciando su http://www.laburno.net/ (complimenti per il sito btw), grazie mille per la segnalazione ma il problema resta.
Certamente un framwork può essere utile e comodo per chi vuole velocemente mettersi a creare un layout std compliant e bugs free (nei limiti della capacità di chi crea il framwork stesso). Il problema sta nel fatto che:
- Non puoi metterti a creare mockup in una griglia verticale di 18px e orizzontale di quanto impostato;
- Quello che scrivi lo devi anche capire. Un framework si ti aiuta, ma non impari nulla di floating, doubled float margins, height 1%, e cosi via;
- Ogni progetto è unico per se stesso. Posso ammettere l’uso del reset, insieme, per esempio, a delle impostazioni base della tipografia, ma il resto è certamente discriminante del progetto in esame;
- Da ogni progetto, poi, hai la possibilità di imparare ogni volta qlc di nuovo, ogni volta! Cosi invece potresti anche arrivare a limitare gli errori il problema è che proprio dalla risluzione degli errori, impari;
- E per ultimo il tempo. Realmente, quanto tempo risparmi non facendo tutto ex novo, a parte il css che userai sempre in ogni progetto, piuttosto che col framwork? Poco, molto poco se sai cosa stai scrivendo.
Ripeto, sono parzialmente a favore del framework e spero che si evolva per permettere a chiunque di poterlo utilizzare in modo produttivo.
9
@Laburno
Ho visto già, spulciando su http://www.laburno.net/ (complimenti per il sito btw), grazie mille per la segnalazione ma il problema resta.
Certamente un framwork può essere utile e comodo per chi vuole velocemente mettersi a creare un layout std compliant e bugs free (nei limiti della capacità di chi crea il framwork stesso). Il problema sta nel fatto che:
- Non puoi metterti a creare mockup in una griglia verticale di 18px e orizzontale di quanto impostato;
- Quello che scrivi lo devi anche capire. Un framework si ti aiuta, ma non impari nulla di floating, doubled float margins, height 1%, e cosi via;
- Ogni progetto è unico per se stesso. Posso ammettere l’uso del reset, insieme, per esempio, a delle impostazioni base della tipografia, ma il resto è certamente discriminante del progetto in esame;
- Da ogni progetto, poi, hai la possibilità di imparare ogni volta qlc di nuovo, ogni volta! Cosi invece potresti anche arrivare a limitare gli errori il problema è che proprio dalla risluzione degli errori, impari;
- E per ultimo il tempo. Realmente, quanto tempo risparmi non facendo tutto ex novo, a parte il css che userai sempre in ogni progetto, piuttosto che col framwork? Poco, molto poco se sai cosa stai scrivendo.
Ripeto, sono parzialmente a favore del framework e spero che si evolva per permettere a chiunque di poterlo utilizzare in modo produttivo.
10
ci ho dato un’occhiata. E’ ben fatto, interessante come concetto, la comodità con cui gestisce le griglie e la tipografia. Però se dovessi applicarlo ai progetti che sviluppo non so quanto tempo mi farebbe risparmiare…
11
Ciao caruso_g,
ti ringrazio.Avevo già scritto qualcosa al riguardo ma non ero riuscito ad accendere una discussione. Vediamo se riesco a esporti il mio *personale* parere, per punti:
- Passo, questo punto non l’ho capito. Resta il fatto che se vuoi puoi usare grid.css per costruire il layout, ma se non soddisfa le tue esigenze, sei liberissimo di non utilizzarlo.
- Sono dell’idea che un framework del genere andrebbe usato dopo che sai già scrivere un CSS, non di certo come punto di partenza per imparare (e questo vale un po per tutti i campi). Considera che i CSS non sono un linguaggio di programmazione, e la complessità di Blueprint è relativa a questo fatto. L’uso che se ne fa, alla fine, è solo una questione di aggiungere qua e la del markup.
- Su questo sono d’accordo, per l’appunto nelle mie prove non ho mai usato buttons.css per esempio. Ma solo le parti che mi servivano. La comodità è che Blueprint è modulare, e questo mi permette di trarne vantaggio solo per quello che realmente mi serve.
- È giustissimo, ma il discorso è un po quello che ho fatto al punto 2. Di certo c’è sempre qualcosa da imparare dietro l’angolo, usare un no un framework non mi preclude questa possibilità sempre però in accordo alla complessità dello stesso.
- Magari posso non risparmiare tempo, però riesco a dedicarne di più ad altri aspetti e posso permettermi di lavorare velocemente sui *fondamentali*. In questo senso avere una solida base di partenza, tempo o no, c’è sempre un vantaggio.
Saluti,
Laburno
12
@Laburno
Ciao Laburno, grazie per la risposta. Ripeto, che a me l’idea piace, detto questo ti spiego il punto uno, da un punto di vista grafico.
Se mi metto a *studiare* un layout, a parte che personalmente comincio da carta e matitone, non posso disegnare pensando direttamente ai divs o le colonne in cui dovrò inserire le slices. Sarebbe troppo riduttivo del momento *creativo*.
Un po come avere un giocattolo di quelli con i buchi in cui inserire la relativa forma i cui fori sono solo a stella… Puoi fare una stella con le punte curve, una con le punte troncate, o solo un pentagono ma sempre cinque lati avrai.
Spero di essermi spiegato. :P
Ciao e grazie ancora per il dialogo. ;)
13
Ciao caruso_g,
si penso di avere afferrato il concetto.Però se non pensi già a come strutturare il layout, mentre lo disegni su Photoshop, dovrai comunque pensarci a lavoro finito: e se poi ti tornerà comodo usare una griglia allora grid.css di Blueprint o chi per lui potrà rivelarsi utile, altrimenti non sei obbligato ad usarlo.
È il vantaggio della modularità.
14
a freddo mi viene da dire : bella l’idea, ma da prendere con le pinze. nel senso che un framwork aiuta chi ha poche conoscenze di css, ma non gli altri.
personalmente non credo che mi possa fare risparmiare molto tempo, tanto da giustificarne l’uso.
15
Ciao,
io penso che sia uno strumento utilissimo per chi vuole creare un sito “classico” cioè abbastanza schematico, senza tabelle.
Credo si possa velocizzare di molto il processo creativo.Parlo per me, ovviamente, visto che non sono un esperto di css. Stavo impazzendo per impaginare in modo corretto un mio sito, visto che era impossibile trovare la compatibilità con browser vecchi…
Con questo framework credo di aver risolto i miei problemi e potrò partire col sito.
Certo questo è solo un modo per velocizzare il processo creativo, ma credo che metterò sicuramente mano al codice per ottenere un css secondo le mie esigenze…# - postato da Sgozzapolli - 09 Gennaio 2008 - 19:01
16
L’idea è buona, semmai il dubbio è che la famigerata separazione del contenuto dall’aspetto va un po’ a farsi friggere.
Forse servirebbe qualcosa del genere a livello di CSS, cioè dare regole più ad alto livello nei file CSS.
# - postato da Aldo "xoen" Giambelluca - 08 Settembre 2009 - 15:23