Share
Il 960 Grid System è in circolazione da un po 'ora? ma è stato usato principalmente sul lato di codifica dei progetti come un framework HTML / CSS. Oggi parleremo dei vantaggi dell'utilizzo di sistemi di griglia come 960GS all'inizio di un progetto, prima ancora di aprire Photoshop o Fireworks. Se non hai mai utilizzato un framework, o vuoi solo un buon ripasso, questo è un ottimo punto di partenza!
Le probabilità sono buone di cui hai già sentito parlare o hai già utilizzato una sorta di framework CSS? ma per ogni evenienza, esaminiamo i principali vantaggi dell'utilizzo di un framework CSS (ovvero il sistema di grid) in qualsiasi progetto web:
In definitiva, una struttura CSS dovrebbe aiutare a stabilire alcune linee guida di base per le colonne di contenuti, fornendo al contempo ai progettisti il pieno controllo sui loro progetti.
In questo articolo: Spiegherò che cos'è un framework CSS e perché ho scelto 960. Quindi, illustrerò le basi su come applicare la griglia 960. Per concludere la discussione, ti mostrerò alcuni siti che utilizzano la griglia 960 e come sono strutturati.
Un Framework CSS è una serie di fogli di stile creati per semplificare la vita di uno sviluppatore web. Rendono conto delle varie stranezze dei browser, sono facilmente adattabili e applicano principi di progettazione di base (come stabilire margini visivamente gradevoli tra gli elementi).
Spesso, questi framework hanno anche fogli di stile tipografici, che possono rappresentare un ottimo punto di partenza per iniziare a lavorare sulla tipografia del tuo sito (per ulteriori informazioni su Typography, leggi questo articolo).
Al momento ci sono due principali Framework CSS: Blueprint e 960. Entrambi sono framework perfettamente funzionanti, con grandi funzionalità e facilità d'uso. Si tratta semplicemente di una questione di preferenza di quale Framework si sente più comodo utilizzando.
Prima di iniziare la fase di progettazione di un progetto, è importante discutere la selezione di un framework con la persona che codificherà il sito. Spesso gli sviluppatori hanno preferenze verso un particolare framework CSS e, poiché uno dei motivi principali per cui utilizziamo i framework durante la fase di progettazione, è la transizione dalla progettazione alla codifica, è una decisione importante. Se stai programmando il progetto da solo, assicurati di essere a tuo agio con la struttura della griglia che scegli: non c'è niente di peggio che progettare un intero sito basato su un framework che non ti piace.
Personalmente, ho trovato che la griglia 960 si adatta meglio alle mie esigenze, quindi è quello che ho adottato ed è quello che discuteremo in questo articolo. Tuttavia, i principi generali che discuteremo si applicheranno a qualsiasi quadro, incluso il progetto.
960.gs si basa sul mettere tutti gli elementi del tuo sito in un contenitore di 960 px di larghezza (ragazza intelligente) e dividendolo in 12, 16 o 24 colonne di dimensioni uguali. Forniscono uno strumento per utilizzare larghezze alternate, ma 960 è ciò per cui è stato sviluppato l'intero sistema e sembra essere piuttosto nitido.
Perché 960px? Perché 960px è una larghezza adatta al vasto numero di piattaforme su cui navighiamo sul Web. In sostanza, consente a un monitor ampio 1024px di mostrare il sito in modo accurato e senza scorrimento orizzontale, tenendo conto della larghezza del browser chrome, barre di scorrimento e un po 'di padding per la leggibilità. C'è sempre un margine di 10px posizionato a destra e a sinistra della colonna del contenuto principale, il che significa che i browser più piccoli saranno sempre in grado di leggere il più lontano dei contenuti a sinistra senza il testo ma contro la finestra del browser.
Inoltre, tutti i numeri nel 960GS sono numeri interi basati sul rapporto aureo: non ci sono punti decimali o problemi di spaziatura funky. Se hai letto il nostro articolo su Matematica e Web Design, sai quanto sia importante ottenere questi numeri.
Una delle omissioni evidenti, o delle belle caratteristiche, a seconda di come la si guarda, è il modo in cui la 960 gestisce (o non) la tipografia. C'è un file text.css incluso, ma questo è principalmente per assicurarsi che ci sia almeno qualcosa sul posto, in modo che mentre fai la prototipazione rapida, elementi comuni come intestazioni, paragrafi ed elenchi abbiano uno stile di base.
Non entrerò troppo in profondità qui, ma discuteremo brevemente le differenze chiave tra 960.gs e Blueprint. In primo luogo, Blueprint è un framework CSS basato su 950px - è molto simile al 960 nel modo in cui gestisce il layout di base (BP usa 24 colonne con approcci simili a padding e rapporti)? ma è qui che Blueprint smette di essere simile.
Il progetto è un sistema quadro molto più complesso, robusto e completo. È stato costruito come un vero foglio di stile per quasi tutti gli elementi che puoi immaginare (pulsanti di opzione, tabelle, ecc.). Ci sono cose che mi piacciono di Blueprint, il più notevole è il suo stile per gli elementi del modulo e le classi di notifica incorporate. Inoltre, include una suite completa di stili per:
Il problema che ho avuto con Blueprint è che è troppo complesso da usare in fase di progettazione? creare un design da zero significa riformattare tutto ciò che forniscono, ed è spesso difficile tenere il passo con la completa comprensibilità che BP fornisce. Al contrario, 960.gs offre solo un layout, perfetto per consentire a un designer di ottenere creatività entro limiti realistici.
La griglia 960 è quasi spaventosamente facile da usare (infatti, potresti iniziare a chiederti: "Perché non stavo usando questo prima?"), Con solo poche semplici regole che devi rispettare.
Dopo averlo scaricato, dai un'occhiata alla directory che hai appena decompresso. Voglio attirare la tua attenzione su due cartelle: "sketch_sheets" e "templates". La cartella "Schede dello schizzo" contiene un PDF delle varie dimensioni della griglia in una finestra del browser e la cartella "modello" contiene i modelli per quasi tutti i programmi di grafica sotto il sole (come GIMP, Fireworks e Photoshop).
Lo scopo di un Framework CSS è semplificarti la vita e dovresti sempre cercare modi per aiutarti a ridurre il tempo necessario per creare un design. Usa questi modelli quando crei un disegno in Photoshop, stampa copie dei "fogli dello schizzo" quando discuti i dettagli di un progetto con un cliente (e assicurati di guardarlo prima di andare!).
In effetti, suggerirei di utilizzare questi fogli di schizzo ogni volta che avvii un progetto: ti permetteranno di sperimentare liberamente prima di bloccarti su qualsiasi layout. Ci vorranno solo 5 minuti di sketch per realizzare che un design funzionerà o meno, a differenza di 50 minuti + se lo stavi progettando e codificandolo.
Una volta che hai raggiunto un accordo di base sul concetto del sito, è ora di aprire i file modello. Questa è probabilmente la ragione principale per cui mi piace usare il sistema 960? viene fornito preconfezionato con i modelli per quasi tutti i programmi a cui è possibile pensare. Mi capita di usare Photoshop, quindi ecco uno screenshot del modello fornito:
Il vantaggio chiave qui è semplice: il modello ha guide predefinite per tutte le colonne di contenuto principale che corrispondono direttamente al framework CSS sul lato della codifica delle cose. È facile disegnare velocemente le colonne del contenuto principale e mantenere tutto nel tuo design pulito e organizzato.
I progettisti esperti potrebbero vedere questo come "design con ruote di addestramento", ma francamente, non c'è niente di sbagliato nell'avere un semplice sistema di sovrapposizione per guidare il framework per un web design.
Devi ancora progettare tutto sul sito (ovviamente!), Ma mantenendo il tuo design in linea con le guide, renderà molto più facile il lato dello sviluppo delle cose. Come ulteriore vantaggio, avere un approccio uniforme al padding tra le celle di contenuto è un ottimo modo per rendere il tuo design più professionale. Leggi di più sul perché "Pixel Perfect Comps" qui.
Ora che il design è stato risolto, è tempo di parlare della sintassi della griglia 960. Come ho accennato nell'introduzione, puoi trovare molte più informazioni sull'utilizzo e la prototipazione con i framework CSS su Nettuts, quindi qui spiegherò le nozioni di base.
Innanzitutto, devi fare riferimento ai file CSS appropriati nel tuo progetto: reset.css (il file di reset che tiene conto delle stranezze del browser), text.css (il foglio di stile della tipografia incorporato), e 960.css (o 960_24_col.css se si utilizza una griglia a 24 colonne). Di solito, inserisco tutti i miei stili specifici del sito in un file separato (di solito chiamato style.css), per assicurarmi di non rompere nulla nel Framework.
Consiglio rapido: Fai riferimento al tuo foglio di stile dopo aver fatto riferimento al Framework, in modo che tu possa regolare gli aspetti specifici del framework senza alterare il Framework stesso (e se commetti un errore, non devi scaricare nuovamente e sovrascrivere i file del Framework). Con questi 4 file, sei pronto per iniziare a progettare il tuo sito.
Ecco una rapida panoramica della sintassi, tratta dal sito 960.gs:
????
Il primo div è il tuo contenitore, in cui verrà archiviato il tuo contenuto. Definendo la sua classe come "container_12", stai dicendo: "Voglio che questo contenitore abbia una griglia di 12 colonne" (La stessa pratica si applica quando si usa un 16 e griglia a 24 colonne).
Ora che hai definito il contenitore come un layout a 12 colonne, inizi a strutturare il tuo sito in modo che rientri nel layout. Se si osservano gli elementi div successivi nella gerarchia (come indicato dalle schede), si vedrà la sintassi per le loro definizioni. "Grid_7" e "grid_3" sono abbastanza facili da capire: stai dicendo che questo elemento div occuperà il numero X di colonne. Tuttavia, 7 + 3 = 10 < 12, which means you'll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of "grid_x suffix_y", you're saying: "I want this div to take up X columns, and for there to be Y number of empty columns after it." (This also applies to prefix). So, since "Grid_7" has a prefix of 1, and "Grid_3" has a suffix of 1, 7+3+1+1 = 12!
Ormai so che ti stai chiedendo degli elementi Div annidati nel div "Grid_7". Bene, puoi annidare div che occupano un numero specificato di colonne all'interno di un altro div, purché non superi la dimensione della sua griglia principale. Inoltre, il primo e l'ultimo elemento devono avere rispettivamente "alpha" e "omega" aggiunti alla loro definizione di classe. Quindi, nel nostro codice di esempio: "grid_2 alpha" è il primo div nested all'interno di "grid_7", l'elemento successivo "grid_3" è nel mezzo (e quindi non ha bisogno di un "alpha" o "omega" aggiunto ad esso), e infine "grid_2_ omega" è l'ultimo div nested all'interno di "grid_7". E poiché 2 + 3 + 2 = 7, la definizione è corretta.
Per illustrare l'intero processo, passiamo ad un breve esempio di utilizzo del Framework 960 durante la fase di progettazione di un mio progetto personale.
Il design stesso è piuttosto semplice, ma è il modo perfetto per mostrarti come il framework può fungere da strumento attraverso il processo di progettazione.
Il sito web di Cerberus: l'esempio che useremo Mass Effect 2 è uno dei miei giochi preferiti degli ultimi 5 anni, e ho pensato che la creazione di un sito per l'organizzazione fittizia "Cerberus" sarebbe stata una sfida. Gli aspetti principali dell'organizzazione sono: professionalità e abilità tecnologica, che ho voluto trasmettere con un design pulito che utilizzava la loro intera combinazione di colori. Per iniziare, ho abbozzato il progetto per il sito (sarebbe stato ipocrita per me agire diversamente, giusto?).
Mentre guardavo lo schizzo del progetto, ho visto come far funzionare il design nella griglia 960. Di seguito è riportato lo scheletro HTML per il mio sito:
LogoCerberus: Forza per l'umanità
NavigazioneSoddisfareSidebarSidebarSidebarfooter
Se hai notato, avevo il logo che copriva solo 2 colonne, mentre l'intestazione secondaria occupava tutti e 12 gli spazi. Poiché il div dell'intestazione era lungo 12 colonne, qualsiasi sottoelemento può contenere fino a 12 colonne. Questo trucco mi ha permesso di creare l'intestazione, dato che il logo era occupato da 2 colonne e lasciato il resto vuoto (l'immagine è in realtà l'immagine di sfondo per il div dell'intestazione). E poiché il sottotitolo era largo 12 colonne, riempiva l'intera larghezza sotto il logo (poiché non poteva adattarsi a tutto il suo contenuto nei 10 spazi rimasti dopo il logo).
Questa è in realtà una distinzione importante da fare, ed è un altro strumento di progettazione che dovresti utilizzare (e per sicurezza, potresti usare "prefisso" o "suffisso" per garantire che una certa quantità di spazio sia riservata). Il resto del sito è carino e asciutto: 8 colonne per il contenuto principale e 4 per la barra laterale. Ogni elemento della barra laterale è un elemento div separato; si impilano l'uno sull'altro perché sono vincolati alla larghezza di 4 colonne.
Per illustrare come è impostato il sito, ho preso uno screenshot del sito e contrassegnato chiaramente le colonne:
Ora, il mio esempio potrebbe non essere il modo migliore per ispirarti davvero a uscire e creare alcuni web designer killer, quindi ecco alcuni esempi del sistema 960 in azione. Puoi trovare ulteriori informazioni sul sito 960.gs.
Uno degli aspetti più interessanti di un Framework CSS è la comodità che offrono ai progettisti. Tuttavia, come qualsiasi altro strumento, devi assicurarti di utilizzarlo in modo pertinente e utile. Non cercare di usarlo se non si adatta al design e non lasciare che limiti la tua creatività. Per la maggior parte dei progetti (specialmente quelli per i layout complessi di giornali o blog), un framework CSS può essere un ottimo strumento per risparmiare tempo, non solo per sputare HTML / CSS rapidi, ma per l'intero processo di progettazione.
Vuoi saperne di più sulla codifica con i framework CSS? Controlla la libreria di articoli di Nettuts sull'argomento (scorri verso il basso per i tutorial più avanzati).
Accentsconagua