Creare griglie di base per i nostri template con i css tramite un framework: 960 Grid System

Siamo nuovamente alle prese con la creazione di un layout di base sul quale poi sviluppare il nostro sito.

Come sempre stiamo lavorando con float, div, margin, padding e via dicendo per creare la grafica perfetta per il nostro nuovo sito, ma il problema è sempre il solito, non viene visualizzato correttamente da tutti i browser, i margini e i float sono difficili da definire

Esiste una possibile soluzione a tutto questo lavoro?

Si, possiamo utilizzare un framework di nome 960 grid system, che ci permette di definire in maniera semplice e rapida il nostro layout.

Prendete per esempio questo layout:

Si vede decisamente che non è allineato, i margini a sinistra e a destra sono diversi, prendete ad esempio la distanza fra il logo e il bordo sinistro e il contenuto con lo stesso bordo, oppure la distanza fra logo e testata e contenuto e sidebar, nettamente diverse, un layout ben progettato avrebbe queste distanza uguali, il tutto è più semplice con 960 grid system.

Vediamo come utilizzarlo, scaricatelo dal sito ufficiale (download) ed estraetelo. Leggete pure il file readme.txt e fatevi un’idea generale, al suo interno c’è anche il codice per includere i css necessari.

Nella cartella app_plugins ci sono i plugin per mostrare la griglia su fireworks e photoshop, per sistemare i nostri temi.

In licenses è contenuta la licenza (GPL), dateci una letta. In templates troveremo i file sorgenti di moltissimi programmi (fra i quali gimp) per vedere le griglie sul nostro layout grafico.

In code abbiamo il codice css necessario per utilizzare 960 grid, ma vedremo il tutto più avanti.

In sketch_sheets troveremo un file pdf, provate ad aprirlo, troverete delle griglie principali con accanto delle linee rappresentanti la distanza. Questo è il sistema che verrà utilizzato.

Infatti 960 grid offre la possibilità di creare un layout basandosi sulle griglie, con il codice css già creato ed ottimizato, basta solo definirlo. Cominciamo dall’inizio, ricreiamo il nostro layout di base su questo nuovo schema, così come mostrato in figura:

Possiamo notare subito che seguendo le linee guida risulta tutto più allineato. Adesso che abbiamo visto il risultato finale cominciamo a scriverlo.

Dovete sapere che per lavorare con 960 grid basterà richiamare 3 file css ed utilizzare delle classi già definite in essi. Creiamo quindi un nuovo file .html e inseriamo al suo interno:

<!DOCTYPE html>

<html lang="it">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Prova 960grid</title>

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

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

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

</head>

<body>

</body>

</html>

Così facendo abbiamo richiamato i tre file css minimi per il funzionamento.

Ovviamente dovete copiare i file presenti nella cartella code/css di nome reset.css, text.css, 960.css nella cartella /css dove avete creato il file .html. 960 Grid System ha due modalità una a 12 “celle” e una a 16 “celle”, la variante è solo il numero di suddivisioni, per ora faremo degli esempi con la versione a 12 suddivisioni, sappiate che per la versione a 16 il ragionamento è identico.

Creeremo quindi un contenitore di dimensione 12 al cui interno andremo a mettere tante griglie fino a riempirlo. Cominciamo creando la testata con il logo a sinistra di dimensione 3 e la testata a destra di dimensione 9, così che 3+9=12 e abbiamo riempito il nostro contenitore.

<div class="container_12">

<div class="grid_3">

</div>

<div class="grid_9">

</div>

</div>

<div class="clear">

</div>

Come potete vedere il contenitore più grande viene chiamato container (in questo caso essendo a 12 andrà con un _12) mentre quelli al suo interno saranno grid_x in cui x sta per la dimensione della griglia.

Come parte finale abbiamo inserito un clear, che serve per mandare a capo e concludere il contenitore. Questo è quello che abbiamo ottenuto.

Io ho aggiunto un bordo per farlo vedere meglio. Ricapitoliamo un attimo: con una classe del tipo container_12 definiamo il contenitore globale, al cui interno stanno i div con la classe grid_x la cui somma delle x da 12 e sono i contenuti, la cui somma deve fare 12.

Verranno disposti sempre allineati uno accanto all’altro, anche se vuoti. Ora passiamo a definire il resto del nostro tema.

<div class="container_12">

<div class="grid_9">

</div>

<div class="grid_3">

</div>

<div class="clear">

</div>

</div>

<div class="container_12">

<div class="grid_12">

</div>

</div>

Ottenendo come risultato finale:

Finalmente abbiamo ottenuto con pochissime righe di codice un bel layout allineato.

Ed infine ecco il file da scaricare e la demo.

Lascia un commento

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