CSS  »  Articoli  »  CSS Template e layout 

Dopo l'hype e il buzz suscitati dall'entrata in scena di framework CSS celebri come Blueprint CSS e YUI Grids, attualmente il panorama è dominato da un nuovo protagonista: 960 Grid System, per gli amici 960gs.

960gs prende ispirazione dai suoi predecessori e focalizza i suoi obiettivi sulla semplicità e lo sviluppo rapido di prototipi e layout. Le sue qualità sono state ben accolte dalla comunità dei designer e moltissimi nomi famosi ricorrono a questo valido strumento per confezionare layout a griglia eccellenti in tempi brevi. Per citare qualche nome, vi basti sapere che 960gs è il framework di riferimento per lo staff di WooThemes.

Contenuto e installazione

Per prima cosa dirigiamoci sulla home ufficiale e scarichiamo il pacchetto di 180k (in alternativa potete prendere il necessario dal repository ufficiale su GitHub).

Create una cartella in cui sviluppare un layout di prova e scompattate dentro il pacchetto con il framework. Quello che otterrete sarà questo:

• code - è la cartella principale che contiene il framework, a sua volta suddivisa in:
• css - dove sono contenuti i fogli di stile
• img - cartella di appoggio per le immagini
• licenses - questa cartella contiene i file della licenza, che è la GPL/MIT
• sketch_scheets - all'interno di questa cartella si trova un PDF da stampare le cui pagine sono suddivise in colonne per permettere al designer di fare delle bozze a mano del layout da realizzare.
• templates - in questa cartella si trovano dei template per costruire dei mockup (bozze digitali) con i programmi più utilizzati: Fireworks, Photoshop, Omnigraffle, Visio.

Lo sviluppo vero e proprio del layout dovrà essere fatto all'interno della cartella code, visto che contiene gli unici file indispensabili si trovano dentro le cartelle css e img.

Per cominciare creiamo una nuova pagina in XHTML 1.0 (va bene anche HTML 4):

Per installare il framework basta incollare queste tre righe nell'head della pagina:

La prima richiama il foglio di reset (che è basato sul reset di Eric Meyer), la seconda si occupa della tipografia, la terza e più importante riguarda la griglia e il suo sviluppo.

Una delle qualità dei vari framework CSS è la semplicità: i fogli di stile non sono complicati, quindi per imparare ad usare un framework, in generale, non abbiamo bisogno che aprire il file che ci interessa e leggerlo. Niente di più. Andiamo quindi ad aprire 960.css e diamo uno sguardo a quello che ci offre (vi consiglio la versione non compressa, dentro alla cartella uncompressed).

Altri articoli

Altre guide

Altre newsletter