Framework CSS: Grid System 960. Cos’è?
Da qualche anno a questa parte si è molto parlato di Framework CSS: Blueprint, Grid System 960, Elastic, ecc… in molti dicono che possono essere un buon punto di partenza per lo sviluppo dei propri lavori.
Ma è davvero così? Oggi vedremo nel dettaglio l’utilizzo di uno di questi framework CSS: il Grid System 960.
Cos’è un framework CSS?
Un framework css è uno strumento che fornisce allo sviluppatore un’architettura ben definita, basata su regole ben precise già scritte che consentono di realizzare applicazioni web senza dover partire da zero.
E cos’è il framework CSS Grid System 960?
Il framework CSS Grid System 960 non è altro che un insieme di fogli di stile con regole già pronte che considerano il contenitore generale disposto su una griglia. Il framework mette a disposizione due griglie: una formata da 12 colonne e un’altra da 16. In entrambe le griglie ovviamente la larghezza del contenitore generale resta sempre di 960px.
Perché scegliere una dimensione di 960px?
Tutti i monitor moderni supportano ormai una risoluzione minima di 1024×768 pixel. Il numero 960 è divisibile per 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 e 480. Questo rende molto più flessibili le combinazioni relative alle dimensioni delle colonne che si possono realizzare.
Nell’immagine che segue puoi vedere un esempio di due siti realizzati utilizzando le due griglie messe a disposizione dal framework Grid System 960: il primo utilizza la griglia a 12 colonne mentre il secondo fa uso della griglia a 16 colonne.
Come si utilizza il framework CSS Grid System 960?
Dopo aver scaricato il framework, la prima cosa da fare è caricare i file necessari per lavorare con la nostra griglia:
<link rel="stylesheet" type="text/css" media="all" href="percorso/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="percorso/960.css" /> <link rel="stylesheet" type="text/css" media="all" href="percorso/text.css" />
Un piccolo consiglio che voglio darti: non apportare modifiche direttamente al file 960.css perché altrimenti queste verrebbero perse nel momento in cui, in futuro, si eseguirebbe un update del framework.
Quindi creiamo un foglio di stile separato da quelli del framework che chiameremo “style.css” il quale conterrà le regole che desideriamo assegnare al sito che stiamo sviluppando e carichiamo anch’esso:
<link rel="stylesheet" type="text/css" media="all" href="percorso/style.css" />
Come scelgo il contenitore/griglia da utilizzare?
Adesso dobbiamo scegliere il tipo di griglia che vogliamo utilizzare tra le due messe a disposizione dal framework, griglia a 12 colonne (.container_12) o griglia a 16 colonne (.container_16). Abbiamo già accennato al fatto che le due griglie hanno entrambe una dimensione di 960px, l’unica differenza è che la griglia a 12 colonne ne divide la dimensione per 12 mentre quella a 16 la suddivide per 16.
La classe che permette di scegliere il tipo di griglia è la seguente:
<!-- selezioniamo la griglia a 12 colonne --> <div class="container_12">
oppure:
<!-- selezioniamo la griglia a 16 colonne --> <div class="container_16">
Come stabiliamo la dimensione delle colonne?
Quando desideriamo dividere il nostro contenitore in più colonne basterà semplicemente utilizzare la classe .grid_XX, dove “XX” rappresenta il numero di colonne (della griglia scelta come contenitore) di cui sarà composta la colonna che vogliamo realizzare.
Per esempio, se desideriamo realizzare due colonne (menù laterale e contenuti) nel layout del sito che stiamo sviluppando basterà semplicemente indicarlo così:
<div class="container_12"> <div class="grid_7">contenuto principale</div> <div class="grid_5">menù laterale</div> </div>
La classe “grid_7” indica che la colonna menù laterale dovrà avere una dimensione pari a 7 colonne della griglia scelta.
Come puoi notare, la somma della prima colonna (grid_7) con la seconda colonna (grid_5) è esattamente 12, il totale delle colonne che compongono la griglia del contenitore che abbiamo scelto (container_12). In questo modo non è necessario conoscere la larghezza che dovrà avere ogni singola colonna è diventa molto più semplice dimensionare le nostre colonne durante lo sviluppo.
Guardiamo un altro esempio, questa volta ci è stato richiesto di suddividere il nostro layout in tre colonne di uguale dimensione, senza dover fare complessi calcoli per specificare le dimensioni in pixel che ciascuna colonna dovrà avere, basterà applicare un po’ di matematica per ottenere quanto segue:
<div class="container_12"> <div class="grid_4">sezione 1</div> <div class="grid_4">sezione 2</div> <div class="grid_4">sezione 3</div> </div>
Anche qui come puoi notare la somma delle tre colonne grid_4 è esattamente 12 (4 + 4 + 4).
Esistono margini tra una colonna e l’altra?
Per impostazione predefinita le colonne hanno un certo margine tra loro. Ogni classe grid_XX ha 10px di margine sia a destra che sinistra. Questo comporta che due colonne adiacenti hanno tra di loro un margine totale di 20px rendendo più armoniosa e leggibile la presentazione dei contenuti.
Nel caso in cui desideriamo che la prima colonna e/o l’ultima colonna del nostro layout non abbiano nessun margine basta aggiungere la classe “alpha” per non assegnare il margine sinistro alla colonna desiderata o la classe “omega” per evitare di assegnare il margine destro.
Vediamone un esempio:
<div class="container_12"> <div class="grid_4 alpha">sezione 1</div> <div class="grid_4">sezione 2</div> <div class="grid_4 omega">sezione 3</div> </div>
Nell’esempio riportato sopra la prima colonna non avrà margine sinistro e l’ultima colonna non avrà nessun margine destro.
E se si desidera lasciare uno o più spazi vuoti prima o dopo una colonna?
Se si desidera inserire uno o più spazi vuoti prima o dopo una colonna basta avvalersi delle classi “prefix_XX” o “suffix_XX” che servono proprio a specificare il numero di colonne (_XX) che si vogliono lasciare vuote. Vediamone un esempio:
<div class="container_12">
<div class="grid_7 prefix_1">
...
</div>
<div class="grid_3 suffix_1">
...
</div>
</div>
Nell’esempio riportato sopra abbiamo lasciato uno spazio vuoto (“prefix_1“: pari alla dimensione di una colonna della griglia scelta) prima di definire una colonna di dimensione grid_7, seguita da una colonna con dimensione grid_3 e uno spazio vuoto subito dopo (“suffix_1“).
Da notare che la somma delle due colonne in aggiunta agli spazi vuoti che abbiamo lasciato all’inizio della prima colonna e subito dopo la seconda (grid_7 + grid_3 + prefix_1 + suffix_1) risulta essere sempre 12.
Conclusioni
L’utilizzo di un framework CSS, come hai avuto modo di vedere, può portare notevoli risparmi di tempo durante lo sviluppo dei tuoi progetti. Ovviamente nulla vieta di personalizzare il framework secondo le tue effettive esigenze in quanto queste soluzioni non potranno mai essere universali, soprattutto per quel che riguarda la tipografia dei tuoi lavori. Quindi il consiglio è di non fermarti al semplice utilizzo di un framework ma di spingerti oltre, personalizzandolo fino a crearne uno tutto tuo da adoperare come punto di partenza per i tuoi futuri lavori.
L'autore
26 commenti
Trackback e pingback
-
Grid Layout: risorse e tool per Web design e griglie | paitadesignblog
[...] sulla maggior parte degli schermi. La GS 960 è disponibile in due varianti principali: una griglia a 960 di… -
YIW Minimal: un template clean & free per un sito semplice ma professionale | Your Inspiration Web
[...] Come gia’ visto in fase di progettazione, Your Inspiration Minimal é stato disegnato tenendo conto del frame work 960.… -
Responsive Grid System | La semplicità di una griglia flessibile | DigitArts.it
[...] Cercherò di dare per scontato che saprai sicuramente utilizzare il sistema di griglie 960 grid system, quindi hai sicuramente… -
Da Psd a Xhtml: come trasformare il layout in XHTML+CSS? | Your Inspiration Web
[...] layout seguendo la griglia messa a disposizione da questo framewwork. Come già spiegato da Nando nel suo articolo su…
grazie per le delucidazioni. Da tempo cercavo spiegazoni su questi framework perchè mi piacerebbe utilizzarli ma non avevo trovato mai nulla di soddisfacente.
Grazie
uso anche io questo framework, ma allo stesso tempo ne sono perplesso…
i css non dovrebbero servire per separare la presentazione dal contenuto? in questo caso avviene proprio il contrario, con il contenuto strettamente legato alla presentazione: non è molto diverso da in fondo…
Ciao Tox e benvenuto su YIW.
Spiegati meglio, non ho ben capito cosa intendi. La presentazione del sito resta sempre e comunque separata dal contenuto, c’è sempre un foglio di stile che si occupa di questo. L’unico accorgimento è che in fase di progettazione grafica ci si deve attenere a rispettare certe proporzioni.
chiedo scusa, rileggendomi mi accorgo che non mi ero spiegato molto in effetti.
quello che voglio dire è che, secondo me, un class=’grid_8′ pur essendo semanticamente corretto non è molto diverso da uno style=’width:400px’, il che finisce per riunire contenuto e presentazione, in un certo qual modo. ma uno degli scopi dei css non era invece quello di slegare contenuto e presentazione?
tox, non sono sicuro di aver capito e credo che tu stia facendo un po’ di confusione.
l’esempio che fai non c’entra con il framework css in questione, mi sembra di capire che tu stia confrontando l’uso degli stili in linea [utilizzando l’attributo style dell'(x)html dove la dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea] con un foglio di stile collegato esternamente.
e la differenza tra i due metodi c’è eccome.
infatti utilizzando gli stili in linea sarebbe esattamente come dici, non avremmo effettiva separazione tra contenuto e presentazione e ogni qual volta volessimo apportare una modifica di presentazione dovremmo agire sulle singole pagine html [oltre che agire su ogni singolo attributo dei vari tag style che desideriamo cambiare].
invece utilizzando un foglio di stile collegato esternamente [dove dichiarare classi e id] si ottiene proprio l’effettiva separazione del contenuto dalla presentazione. in questo modo, semplicemente cambiando il foglio di stile collegato senza toccare quindi la pagina (x)html possiamo rivoluzionarne completamente l’estetica.
per farti capire meglio il concetto, ti invito a visitare questo sito dove, qualche mese addietro, prendendo spunto da csszengarden, laura ha lanciato un concorso. i partecipanti, data una pagina web con relativo foglio di stile collegato, dovevano cimentarsi nella realizzazione di una bozza grafica semplicemente modificandone il file css e lasciando quindi inalterato il codice della pagina (x)html.
anche sara si è voluta cimentare con questo esercizio di stile e ecco quello che ne è venuto fuori.
tutto questo però con il framework css non c’entra nulla: dal punto di vista di separazione dei contenuti dalla presentazione, scrivere class=”grid_8” piuttosto che class=”box1” non comporterebbe nessuna differenza.
spero di aver interpretato bene il tuo interrogativo.
alla prossima!
la differenza fra stile in linea e foglio di stile la conosco bene, quello che mi lascia perplesso è quanto separi il testo dai contenuti dire, in linea, che class=”grid_8″…
faccio un esempio pratico: ho un sito con una banda laterale a sinistra (grid_3) ed una parte centrale più grande (grid_7). decido, in un secondo momento, che voglio modificare leggermente la grafica lasciando le due parti alla stessa dimensione. la soluzione più economica è quella di modificare l’html della pagina, impostando entrambe le classi a grid_5 e grid_5, ma non è proprio quello che si voleva evitare? e se volessi fare in modo che l’utente possa scegliere quale dei due fogli di stile vuole utilizzare?
la mia perplessità è più teorica che pratica in realtà, uso anche io questo framework con soddisfazione su alcuni miei siti, ma semanticamente trovo scorretto impostare le dimensioni di un oggetto dal nome della classe che gli imposto nell’html
spero di essermi chiarito
ToX ma ciao !! :)
Ti aiuto io: se vuoi cambiare al volo le impostazioni del layout non devi fare altro che hai selettori gli cambi la classe da “grid_7” a “grid_5”. Questo farà mutare al volo il layout. Sicuramente non è di tuo gradimento questo FrameWork, ma ti posso assicurare che elimina molti problemi, specialmente cross-browser :)
Grazie !!
ragazzi mi era sfuggito questo post (vi ho conosciuti dopo) ma davvero avete un dono di spiegare le cose in modo superbo, complimenti vivissimi ;)
Grazie capobecchino, cerchiamo di dare il massimo di noi stessi in ogni articolo e siamo felici di vedere che questo viene colto. A presto ;)
riesumo questo post, io ho la stessa perplessità di ToX a riguardo che al momento mi fa evitare di utilizzare questi framework,
la cosa che mi piace di questi framework rimane sicuramente il fatto di non dover scrivere più colonne di width ed height nei fogli di stile… ma ormai penso che per chi ha un po’ di pratica con i css fare due conti sulle larghezze dei div e scriverne le dimensioni è un procedimento ormai veloce ed automatizzato…
una integrazione significativa di questi framewrok può esserci forse per i progetti medio-grandi dove si lavora con funzioni e moduli e in maniera tale non serve mettere mano al html ma solamente al dato modulo php ecc..
però non toglie che se ho un piccolo progetto di 5-6 paginette e un giorno mi sveglio che la tal sezione deve occupare 4 colonne invece che 5 devo star li a modificare tutte le pagine… è vero che potrei sempre andare a modificare il foglio di stile del framework… ma non avrebbe più senso usarlo a quel punto!
Ciao Marco, innanzitutto grazie per aver esposto il tuo pensiero.
Io penso che quando si utilizzano dei framework, di qualsiasi natura essi siano (php, asp.net, css, javascript, ecc), ci sono sempre dei pro e dei contro che bisogna prendere in considerazione. Poi – sulla base del lavoro da svolgere e delle esigenze richieste dal progetto in questione – valutare se i pro superano i contro e in caso affermativo, scegliere l’utilizzo del framework per lo sviluppo del progetto.
Per quanto riguarda i pro, oltre al risparmio del tempo (che può anche essere consistente per lo sviluppo di siti che hanno un design piuttosto articolato) c’è da prendere in considerazione l’armonia e il rispettto delle proporzioni con cui i contenuti vengono distribuiti nel documento. Considera che il concetto di griglia è ben noto nel design tradizionale e applicarlo anche sul web, a prescindere dall’applicazione di un framework, può migliorare notevolmente l’aspetto con cui i contenuti vengono mostrati.
Per quanto riguarda la critica da te esposta sull’esempio che hai menzionato, la condivido pienamente, e questo è uno dei limiti dell’utilizzo di un framework CSS che deve essere preso in considerazione nella fase di valutazione. Però, se passiamo dalla teoria alla pratica, per esperienza personale ti posso dire che non capita quasi mai di apportare modifiche del genere ad un sito una volta sviluppato. E’ molto più probabilche che il cliente ti chieda di aggiungere qualche ulteriore pagina o l’intero restyling del sito e non di aumentare la dimensione di una sezione da “x” colonne a “y” colonne delle pagine già esistenti.
Ahhh finalmente qualcuno che svela l’arcano xD
Domanda: Se volessi un layout del tipo col_sx + col_dx e sotto una unica colonna (stile footer ma non è il footer) ?
Stando alle spiegazioni … dovrei fare:
grid_5 + grid_7 e sotto grid_12 ? Ho capito bene ?
Grazie e ciao
Ciao paskuale, scusa il ritardo di questa risposta.
Hai capito bene, una cosa importante però è l’utilizzo di un div “pulitore” dopo aver utilizzato più colonne:
<div class="grid_5">...</div>
<div class="grid_7>...</div>
<div class="clear"></div>
L’uso del div con classe clear non ha motivo strutturale ma solo di presentazione: nel caso in cui il contenuto di una delle due sezioni sia troppo corto e non riesca a coprire l’altezza dell’altra sezione, è necessario contenerne il float.
Inoltre se dopo queste due colonne volessi realizzare una sezione larga 12 colonne, puoi evitare di creare una nuova classe con grid_12 in quanto ti trovi già sotto la classe principale container_12 che già da se provvede a creare una sezione larga 12 colonne.
Io sono un po’ confuso…..sarà che vengo da una scuola di ragioneria, ma mi sembra più semplice calcolare la dimensione delle colonne, sono pazzo? :)
Scusate l’ignoranza, ma sono alle prime armi con il web design & affini.
Ho visto in alcuni vostri tutorial che con photoshop impostate le 12 colonne del framework che userete nel layout del sito come una sorta di “semigriglia” nel programma di grafica,il tutto dentro le due guide verticali che create in precedenza.
Si potrebbe fare la stessa cosa con the Gimp? Visto che ci sono,reputate che sia una soluzione sufficiente come programma,visto che non ho disponibilità per acquistare photoshop?
Spero di essermi spiegato chiaramente.Grazie mille, e tra l’altro complimenti per gli ottimi tutorials e guide,date spunti utilissimi.
Ciao.
Quello che non riesco a capire io invece è come implementare questi framework in un progetto dove si utilizzi CMS. Perchè mi risulta impensabile screivere a mano il codice PHP di un grosso progetto invece che utilizzare una base di un CMS che per lo meno ti dà già una sua struttura e motore e ti eviti tante grane. Con questi framewok sbaglio o dovrei scrivere tutto da zero? grazie!
Ciao e complimenti per tutto davvero :) Ho una questioncina con il grid, mettiamo il caso che io abbia un grid_16 e un grid_8 e al 16 volessi mettere un bordo destro lui mi rimanda a capo il grid_8 per mancanza di spazio, come se quei 2 pixel di bordo, ovviamente, spingano fuori impaginazione. Che soluzione c’è?
Grazie mille ^^
ciao sto studiando il framework…. vorrei chiederti cosa significa il push e il pull… non ho ben capito cosa significano
Complimenti per la guida, chiarissima e finalmente esaustiva! Avevo avuto info su questo framework ma mai mi sono cimentata, adesso proverò sicuramente!
thanks for content.
Salve, questo framework con la larghezza massima di 960 non sarà diventato obsoleto visto che attualmente la risoluzione dei monitor è molto più grande?