Share
Grid 960 è un framework CSS che consente agli sviluppatori di prototipare rapidamente i progetti. Sono strumenti eccellenti per creare simulazioni. Perché? Perché fanno tutto il lavoro pesante che ti permette di ottenere risultati più veloci.
Sembra carino, ma come lo facciamo? Ci sono molti articoli su internet che esplodono o supportano i framework CSS, ma nessuno ha alcun contenuto per aiutare i lettori inesperti a decidere. Questo è diverso. Questo articolo copre l'intero processo di prototipazione. Immagina di avere un design e di aver bisogno di un modello per il cliente. Questo articolo spiega le basi di Grid 960, pianificando la griglia per un progetto e codificando il prototipo. La progettazione di esempio sfrutterà la maggior parte delle funzionalità di Grid 960 offrendoti una solida base di conoscenze su cui lavorare. Dopo aver visto il design di seguito, è tempo di imparare come funziona Grid 960.
Grid 960 funziona utilizzando le classi attraverso l'ereditarietà. Grid 960 fornisce due griglie: 12 e 16 colonne. Il contenitore principale è sempre largo 960 px. L'utilizzo di 960 consente la maggior parte delle combinazioni di colonne pur essendo facile da lavorare. Utilizzeremo la griglia a 12 colonne per codificare questo progetto, ma non useremo tutte le 12 colonne. Ogni cella della griglia ha un margine: 0 10 px. Questo crea una grondaia di 20 px. Quando si crea una riga, la larghezza totale di tutti gli elementi si sommano a 960. Dai un'occhiata alla pagina dimostrativa di Grid 960. Vedrai una bella griglia con tutti i tipi di combinazioni. Ogni cella della griglia ha una classe che specifica quale larghezza sarà. Ecco la suddivisione delle larghezze delle colonne per una griglia di 12 colonne.
Ogni larghezza corrisponde a un nome di classe formato in questo modo: grid_X dove X è un numero dall'elenco precedente. Se vuoi un blocco con larghezza 940 usa la classe grid_12. In che modo Grid 960 sa quale larghezza dovrebbe essere? Ogni griglia_x è un selettore container_Y .grid_X dove Y è 12 o 16 per le colonne. Consente di immergersi in un codice. Ecco come creare una griglia a due righe in un contenitore di 12 colonne. Lascia che la prima riga sia 940 px e la seconda fila contenga due colonne uguali.
940px
460PX
460PX
Quando crei una riga nella griglia, assicurati che tutti i numeri grid_X figli si sommano al numero di colonne che stai utilizzando. Questo garantisce la larghezza corretta. Due div di griglia_6 sommano fino a 12. Non sei limitato agli stessi numeri. Potresti anche usare 6, 4 e 2. Eccolo lì, una griglia veloce pronta per il contenuto. Ora che sai come funziona Grid 960, vediamo come creare il mockup.
Visualizzare la griglia del design è facile. C'è una riga per l'immagine dell'intestazione, una riga per la barra di navigazione, una riga con 2 colonne per la trama e il poster, un distanziatore, 4 colonne, un distanziale, di un piè di pagina con 3 colonne. Clicca sull'immagine per il codice.
Dopo aver controllato la visuale, dovresti capire come creare la griglia del mockup. Usando le larghezze, abbina le # della classe dalla lista e lascia che il codice venga lanciato insieme. Ricorda di aggiungere il div di compensazione alla fine di ogni riga. Non dimenticare di includere i fogli di stile inclusi nel pacchetto Grid 960.
Lo scheletro è pronto. È ora di iniziare a sovrapporre il design. Le barre verdi sono solo div con colore di sfondo e altezza. La barra di navigazione non ha un'altezza impostata. Invece, sarà controllato dalla dimensione dei collegamenti all'interno. Non dimenticare di aggiungere anche l'immagine dell'intestazione.
div.spacer background-color: # 8FC73E; altezza: 1em; div # navbar background-color: # 8FC73E; imbottitura: 10px 0;
Applica la classe per correggere div_c_12 e imposta l'ID.
Le colonne centrali non richiedono alcun effetto. Aggiungi del testo del segnaposto per compilare il disegno. Puoi farne un po 'qui. Prima di affrontare la sezione superiore, vai al piè di pagina. Nello screenshot, il piè di pagina è un colore solido. Non puoi realizzare questo con il codice corrente. Un wrapper div attorno alle tre colonne in basso risolve il problema. Quindi pensi, non è un grosso problema, basta inserire un div. Ciò interrompe la griglia dal momento che Grid 960 si basa su genitori e figli per applicare gli stili (ricorda il selettore container_12 .grid_4?) Un subgrid risolve il problema. Grid 960 consente griglie annidate. Crea una subgrid aggiungendo un grid_12 div, quindi posiziona il grid_4 al suo interno. Quando si usano griglie annidate, gli elementi figli richiedono classi speciali. Il primo figlio ha bisogno di una classe "alpha" e l'ultimo figlio di una classe &qout;omega "Modifica il codice per riflettere le modifiche e applicare le modifiche stilistiche al piè di pagina.
div # footer background-color: # e5e5e6;
Eccellente! Ora il piè di pagina ha un colore di sfondo solido e puoi modificare le dimensioni delle colonne se necessario. Ora aggiungi un testo fittizio alle colonne del footer e ti consente di spostarti sulla barra di navigazione. La barra di navigazione è una semplice lista non ordinata. Aggiungi alcuni collegamenti e uno stile adeguato.
div # navbar ul list-style: none; blocco di visualizzazione; margine: 0 10px; div # navbar ul li float: left; margine: 0 1,5em; font: bold 1em Arial;
Dolce. La pagina sta davvero arrivando insieme. Tutto ciò che rimane è creare gli effetti di blocco nella sezione superiore. Questo è più sinistro di quanto sembri. Prima di immergerci, è necessario comprendere alcune cose sui framework Grid 960 e CSS in generale.
I lettori più attenti potrebbero aver realizzato qualcosa. La pagina è estremamente rigida. Tutto ha una dimensione definita e la modifica delle dimensioni crea problemi o potenzialmente interrompe il progetto. I progettisti sacrificano anche alcuni dei nostri obiettivi di progettazione, grazie a ciò che consente la Grid 960. Ad esempio, il progetto di esempio era largo 1000 px. Grid 960 crea solo griglie di 960 px di larghezza, quindi la dimensione extra viene persa. Cosa succede se si desidera rendere la pagina 1000px anziché 960? In breve, non è possibile senza apportare alcune modifiche al codice. Il framework blocca i designer in una serie di vincoli. Supponiamo che il cliente desideri un design più ampio o più sottile. Molto probabilmente il progettista dovrà scartare il codice che ha scritto per raggiungere i nuovi obiettivi. C'è un altro problema che non è stato ancora rivelato - colonne di altezza uguale. Poiché le colonne centrali condividono tutti lo stesso sfondo, sembrano essere all'altezza delle stesse. Nel footer un div wrapper mette uno sfondo dietro le 3 colonne. Grid 960 non ti dà colonne di uguale altezza. Ovviamente c'è un modo per realizzarlo da solo. Dal momento che stiamo prototipando un progetto, non sprecare tempo a preoccuparsi dei dettagli più fini su come funzionerà il design durante la produzione. Stai solo cercando di trasmettere le idee in questa fase. C'è anche un altro aspetto di Grid 960 da prendere in considerazione prima di affrontare la parte superiore. Grid 960 si basa su elementi e margini dimensionati per creare una riga di dimensioni corrette. Se si applica il riempimento o i bordi, il design si interrompe. Se lo fai, devi regolare la dimensione del div per riflettere le modifiche. Sii stanco di questo. Regolare le dimensioni degli elementi in due punti porterà sempre alla confusione e renderà il disegno più difficile da mantenere. Detto ciò. Finiamo la parte superiore.
Fortunatamente puoi manovrare attorno a colonne di uguale altezza nella sezione superiore. Poiché l'immagine a destra come altezza e larghezza impostate, conosciamo le dimensioni dell'altro. Crea l'effetto di blocco aggiungendo un nuovo div con un bordo all'interno delle div esistenti. Non dimenticare di impostare le altezze. Non impostare il riempimento sui div perché questo cambierà la larghezza del blocco e interromperà la griglia. Invece, specifica un margine su un elemento figlio. Questo non cambierà la larghezza del blocco. Applica un margine a un elemento in linea. Questo crea l'effetto desiderato e il testo si avvolge per adattarsi.
Utilizzare una classe anziché ID poiché la classe topSection viene applicata a due div. Questo ci permette anche di cambiare le altezze più facilmente. Scegli un'altezza (questo numero dipende solo da te) e crea una classe.
div.topSection div border: solid 10px # e5e5e6; altezza: 280 px; div.topSection div p margin: 10px;
Freddo! Consente di verificare i progressi.
Pronto a riempire le due scatole? Vai avanti e riempi quella sinistra con alcuni esempi di testo. Non fare troppo o traboccherà la scatola. Ciò crea un potenziale problema nel progetto finale. Come fai a sapere quanto testo è troppo? Per la progettazione della produzione, il progettista dovrebbe creare una funzione per consentire solo X quantità di parole per interrompere il flusso eccessivo. È ora di preparare l'immagine del poster. Prima di inserire un'immagine determina le dimensioni. Se sei bravo in matematica e comprendi il modello di box, molto probabilmente sai già quanto dovrebbe essere grande. In caso contrario, accendi FireBug e fai un picco nel DOM. Clicca su Ispeziona. Vai giù al div in questione e cliccaci sopra. Apri la scheda Layout. FireBug mostrerà un utile riferimento al modello di box. Guarda l'immagine per aiuto. Clicca sull'immagine per ingrandirla.
Lo screenshot mostra che il poster div è 360x280. Trova un'immagine e crea uno stile. Ho deciso di lasciare che l'immagine riempisse l'intero div (a differenza del disegno di esempio). Se volevi creare un margine di 10px, assicurati di ridurre le dimensioni di 20 px su ciascun lato.
img # poster width: 360px; altezza: 280 px;
Dovresti ottenere questo. Il mockup è completo. Sentiti libero di inserire del testo reale e cambiare l'immagine.
Ora che il prototipo è finito, per fare il punto su ciò che è stato fatto. Sei riuscito a prototipare rapidamente un design. Grid 960 ha creato facilmente la griglia per noi. Dove andare da qui? Ovviamente vorremmo mostrare al cliente e vedere cosa pensano. Ci sono alcuni avvertimenti però. Hai testato questo design in IE6 o IE7? No. Dovremmo? No. Questo è un prototipo. Questo è come sarebbe nella produzione. È naturale che qualsiasi stranezza del browser venga elaborata prima della produzione. Cosa succede se i clienti vogliono creare un design più complesso? In questo caso, inizierai rapidamente a vedere i limiti del framework. Cosa succede se il design deve essere liquido o elastico? Il quadro non lo farà. Avresti bisogno di ricominciare da capo. Ricorda che i CSS Framework non risolvono tutti i tuoi problemi, ma aiutano con alcuni. Grid 960 e altri sono ottimi per il lancio di prototipi. Puoi anche usare i concetti di Grid 960 nel codice di produzione, ma non è consigliabile attenersi a un framework fino alla produzione. I framework CSS sono come qualsiasi strumento, hanno i loro usi. Con questo in mente, vai avanti e prototipo!
Accentsconagua