Lo ami o lo odi, il 960.gs rende la prototipazione incredibilmente veloce. Utilizzando le classi preimpostate è possibile realizzare layout abbastanza complessi con uno sforzo minimo o nullo.
Oggi ti offriamo un modello gratuito a pagina singola, completamente codificato con 960.gs. Il modello ha alcuni effetti CSS3 e usa @ font-face per implementare alcune bellissime tipografie personalizzate. Di seguito troverai il download e un tutorial passo-passo di base su come crearne uno tuo.
Puoi scaricare il modello completamente gratis e utilizzarlo come preferisci con attribuzione zero.
Scarica il modello
- Anteprima nel browser
- Scarica .ZIP
Ecco una rapida anteprima di come appare il modello:
Scarica le risorse 960.GS
La prima cosa che vorrai fare è andare sul sito Web di 960 Grid System e fare clic sul pulsante di download in alto a sinistra nella pagina.
Il download contiene un sacco di cose, ma in realtà tutto ciò di cui abbiamo bisogno sono tre file CSS: reset.css, text.css e 960.css. Questi sono i componenti standard su cui è costruito il sistema di griglia. I fogli di stile di reset e di testo sono completamente opzionali, ma li useremo per garantire che tutto rimanga bello e coerente su vari browser.
Il seguente tutorial presumerà che tu abbia una certa familiarità con entrambi i CSS e 960.gs. Se hai bisogno di un corso accelerato sui sistemi di rete, consulta la mia guida 960 su Six Revisions.
Passaggio 1: avvia i tuoi file HTML e CSS
Oltre ai file CSS forniti con 960.gs, avremo bisogno del nostro. Crea una directory sul tuo computer, carica i file che hai scaricato e crea un file index.html e un file style.css.
Incolla il seguente codice nel codice HTML per iniziare:
In pratica, ci siamo limitati a collegare i nostri vari file CSS (probabilmente troppo numerosi per una singola pagina Web, ma questa è costruita per espandersi) e abbiamo iniziato l'HTML del corpo.
Il design presenta sottili barre grigie nella parte superiore e inferiore della pagina. Vogliamo che questi si estendano fino in fondo alla pagina, quindi li posizioniamo al di fuori del 960 div.
Successivamente, tra l'intestazione e il piè di pagina è un div con una classe di? Container_12 ?. Dal momento che stiamo usando la versione a 12 colonne del sistema 960 questo creerà un div che attraversa la maggior parte del modo attraverso la pagina e viene automaticamente centrato orizzontalmente.
Passaggio 2: i caratteri
Utilizzeremo due caratteri non Web personalizzati per questo progetto: Lobster e Caviar Dreams. Entrambi possono essere trovati nella libreria FontSquirrel @ Font-Face Kit.
Scarica i kit per ciascun font e posiziona i vari file di font nel file di progetto. Nel CSS fornito con ogni kit dovresti trovare il codice @ font-face per incorporare quel font. Prendi lo snippet per ogni font e incollalo nel tuo file stye.css.
Usando questo codice, possiamo ora includere questi font nei nostri stack di font semplicemente digitando 'Lobster13Regular' o 'CaviarDreamsRegular'.
Passaggio 3: intestazione
Dal momento che abbiamo già aggiunto l'intestazione al nostro codice HTML, tutto ciò che dobbiamo fare per farlo apparire è aggiungere uno stile di base.
Fondamentalmente tutto ciò che abbiamo fatto qui è dato l'intestazione di altezza e colore di sfondo.
Passaggio 4: Navigazione HTML
La prima cosa che appare dopo l'intestazione è la navigazione. Questo è un po 'complicato dal momento che è flottato sul lato destro della pagina. Potremmo impostare una classe 960 e poi usare il comando push, ma è molto più semplice non applicare alcuna classe al div e farlo galleggiare correttamente con i CSS.
Per l'HTML abbiamo solo bisogno di una lista standard non ordinata con alcuni link. Ho inserito alcuni link segnaposto qui, ma ovviamente vorrai personalizzare questo per il tuo sito.
Passaggio 5: Navigazione CSS
Quindi abbiamo bisogno di impostare un sacco di stili per la navigazione. Collegamenti, liste non ordinate, voci di elenco e effetti al passaggio del mouse devono essere tutti risolti.
Si noti che abbiamo impostato il carattere su Caviar Dreams come abbiamo appreso in precedenza e abbiamo verificato che alcuni backup fossero elencati nel caso in cui il browser non caricasse il carattere corretto.
La cosa più strana è che abbiamo usato sia un float a sinistra sia un float a destra. Per fare in modo che gli elementi della lista appaiano in una riga anziché in pila, dobbiamo spostare il? Ul li? sinistra. Per fare in modo che il set nel suo insieme aderisca al lato destro del nostro contenitore div, abbiamo spostato il #nav a destra.
Tutto il resto è solo una manciata di stili di base come il colore, la dimensione del font, ecc. Per differenziare il collegamento su hover ho applicato una semplice sottolineatura.
A questo punto la tua pagina dovrebbe iniziare a prendere forma. Assicurati che sia vicino all'anteprima qui sotto.
Passaggio 6: titolo HTML
Dopo la navigazione, aggiungi un div con un id di? Headline? e una classe di? grid_12 ?. La classe grid_12 renderà la larghezza del div uguale a quella dell'intero contenitore. All'interno di quel luogo si trovano un tag h2 e un tag paragrafo con qualche contenuto.
Si noti che dopo le div di navigazione e titolo c'è un div con una classe di? Clear ?. Ecco come il 960 Grid System cancella i galleggianti precedentemente implementati. Assicurati di lanciarlo ogni volta che vuoi iniziare una nuova riga di contenuti.
Passaggio 7: titolo CSS
Successivamente aggiungi gli stili per il titolo, il tag h2 del titolo e il tag del paragrafo headline. Ho impostato l'h2 su 50px Lobster e il paragrafo su 25px Caviar Dreams.
Con questo, la tua pagina dovrebbe ora avere una barra in alto, un'area di navigazione e un bel titolo.
Step 8: Il Big Photo HTML
Per aggiungere la foto, utilizzeremo un div vuoto con la classe grid_12 e imposteremo lo sfondo usando i CSS.
Step 9: Il Big Photo CSS
Per il CSS abbiamo impostato un'immagine di sfondo per il div, gli abbiamo dato un bordo 3px e applicato un'ombra di CSS3-box. Il bordo bianco non viene visualizzato su uno sfondo bianco, quindi l'ombra conferisce all'immagine una certa profondità.
Passaggio 10: HTML elemento pubblicitario
L'ultimo pezzo di HTML di cui abbiamo bisogno sono le caselle e il testo nella parte inferiore della pagina.Li struttureremo con una classe per semplificare l'aggiunta di altri in seguito.
Per costruire questa sezione vogliamo due colonne: una per l'immagine e una per il testo accanto ad essa. Questo è dove il 960.gs ci rende più facile. Dal momento che stiamo usando la versione a 12 colonne, vogliamo che il nostro numero raggiunga un totale di dodici per allungare completamente il container.
Applicando il? Griglia_4? classe seguita dalla? griglia_8? classe, otteniamo due colonne, la prima delle quali è la metà della larghezza della seconda (8 + 4 = 12).
Nota che abbiamo raddoppiato il nostro codice e inserito diverse immagini. Questo ci dà due dei? LineItem? le zone. Basta aggiungere un altro pezzo duplicato per aggiungere un terzo o un quarto.
Passaggio 11: elemento pubblicitario CSS
Successivamente aggiungiamo un po 'di stile a quest'area per renderlo bello. Assegna alle immagini un'ombra e delinea e applica i caratteri appropriati.
Notate che abbiamo usato? Outline? invece di? border? Qui. Questo è un trucco CSS accurato che essenzialmente ti permette di avere un bordo dell'immagine che non rovina il tuo layout.
Al termine, gli elementi pubblicitari dovrebbero apparire fantastici e saranno suddivisi in colonne chiaramente definite.
Step 12: piè di pagina CSS
Il passaggio finale consiste nell'applicare gli stessi stili al footer come abbiamo fatto per l'intestazione. Ciò conferisce al sito un bel contrasto pesante sul fondo e sulla parte superiore.
Risultato finale
Questo dovrebbe darti un prodotto finito funzionante! Si noti che la maggior parte del nostro lavoro consisteva nello styling degli oggetti che abbiamo inserito nella pagina. Abbiamo passato quasi del tempo a preoccuparci del posizionamento. Questa è l'attrazione principale dei sistemi a griglia come 960 e Blueprint.
Possiamo discutere semantica tutto il giorno ma alla fine questi strumenti ti aiutano a concentrarti maggiormente sul design e meno sui problemi di layout. È probabile che i più esperti diventino con i CSS, meno vedrai la necessità di utilizzare un sistema di grid per eseguire il layout per te, ma fino ad allora è bello risolvere i tuoi problemi prima che si verifichino.
Conclusione
Come è inevitabile in questi tipi di post, molte persone lasceranno senza dubbio commenti bashing grid systems. La verità è che raramente li uso. Tuttavia, vedo il loro valore e mi diverto a giocherellare con loro per vedere cosa riesco a trovare. In conclusione, se non ti piace 960.gs, non scaricare il modello!
Tuttavia, se sei a tuo agio con i sistemi di grid e come roba gratis, scarica il file e spostati di nuovo! Se lo usi in un progetto, fai un link qui sotto (opzionale) così posso verificare come lo hai implementato ed esteso il design. Se hai bisogno di un suggerimento, quella grande foto sta per essere trasformata in un cursore jQuery.