Uno strumento che utilizzo molto spesso per lo sviluppo della parte grafica di applicazioni web è 960gs. Oggi vorrei aiutare chi, alle prime armi con lo sviluppo web, vuole cimentarsi nell’utilizzo di strumenti avanzati per lavori di un certo livello (e direi anche qualità!). Premetto che per leggere questa guida è necessario conoscere le basi di HTML e CSS (non è complicato!).

Sommario

Cos’è 960gs.

È un framework CSS (Cascading Style Sheet) per la creazione di layout grafici mescolando opportunamente HTML e CSS, gs è l’acronimo di Grid System, ciò indica molto chiaramente che questo strumento permette la costruzione di pagine HTML utilizzando delle griglie. Voi potreste dire: Ma non si potrebbero usare direttamente delle tabelle HTML? ed io potrei rispondere Sbagliatissimo!. Mai sentito parlare di accessiblità? Di siti conformi allo standard W3C? Nello sviluppo web, queste informazioni dovrebbero essere la bibbia dello sviluppatore! Usare le tabelle è un errore che il mio professore di elettronica avrebbe segnato con la penna blu, queste vanno usate quando dobbiamo stampare realmente dei dati di tipo tabellare, in altri casi è necessario attenersi allo standard ed utilizzare un layout fluido e leggero. Quindi si potrebbe dire che:

960gs è un framework che si contrappone all’uso sbagliato delle tabelle ed emula queste utilizzando div, con cui è possibile ottenere qualità delle pagine e conformità allo standard.

Cosa occorre per utilizzare il framework?

Per poter utilizzare il framework è necessario avere i file .css di 960gs che puoi scaricare direttamente qui:
[download id="4"]
Il file contiene una cartella, css ed al suo interno abbiamo:

  • 960.css,960_24_col.css,reset.css,text.css: file contenenti tutti gli elementi css necessari per poter utilizzare il framework, i file sono “compressi”, cioè non esistono tabulazioni, spazi o a capo al loro interno (quindi è molto difficile poterli leggere).
  • uncompressed: contiene una versione decompressa di tutti i file del framework (per lo sviluppatore “voglioso di leggere”, scherzi a parte sarebbe anche il caso di leggere questi file per comprendere meglio come il framework funziona).

Progettare un layout

La prima operazione è molto semplice e divertente, utilizzare fantasia ed immaginazione per disegnare il layout grafico che si vuole ottenere (una matita ed una penna sarebbero ottimi strumenti per questa operazione!).

Configurare una pagina per utilizzare il framework.

Ora è necessario configurare la pagina per poter utilizzare il framework, copiare la cartella estratta dal file precedentemente scaricato (ricordate il pacchetto .zip?) all’interno del progetto web con cui si sta lavorando. Successivamente aprire la pagina web e posizionarsi sul tag <head>:

    
    <link href="css/960.css" rel="stylesheet" type="text/css" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/text.css" rel="stylesheet" type="text/css" />

Ora il framework è pronto per essere utilizzato!

Disegnare il layout nella pagina.

Si passa ora all’utilizzo vero e proprio del framework, attraverso il quale porteremo il nostro schizzo fatto su carta direttamente sulla pagina web utilizzando il framework 960gs. Di seguito il codice da inserire all’interno del tag <body> della pagina, per maggiore chiarezza ho applicato l’id presente nella figura dello schizzo nei contenitori:

<body>
    <div class="container_12">
         <div id="Header" class="grid_12 alpha omega">
         </div>
         <div class="clear"></div>
         <div id="Menu" class="grid_3 alpha">
         </div>
         <div id="Content" class="grid_9 omega">
         </div>
         <div class="clear"></div>
         <div id="Footer" class="grid_12 alpha omega">
         </div>
    </div>
</body>

Di seguito la spiegazione di ogni class utilizzato per costruire il layout:

container_12
specifica il tipo di contenitore da utilizzare, il numero impostato come suffisso indica le colonne che sarà possibile configurare all’interno della griglia, quindi container_12 indica che sto costruendo un layout a 12 colonne, ma è possibile utilizzarne altri quali: container_16, container_24.
grid_?
specifica il numero di colonne che il contenitore simulerà, anche qui il numero impostato come suffisso indica quante colonne occupare, avendo utilizzato nell’esempio un layout a 12 colonne il massimo che potremo impostare come class sarà “grid_12
alpha
specifica che la grid inserita è la prima della riga corrente(inserire questo tag è importante al fine di poter rispettare i margini del layout 960).
omega
specifica che la grid inserita è l’ultima della riga corrente (anche qui vale la stessa regola di alpha).
clear
ogni qual volta, utilizzando div, completiamo il numero di colonne disponibili per una riga, va inserito un div con class=”clear” per andare alla riga successiva.

Utilizzare 960gs non è per niente difficile, basta conoscere la logica applicata alle classi css per poter capire come disegnare velocemente un layout fluido e di facile gestione. Enjoy!