Corso Crash YUI Grids CSS

La libreria dell'interfaccia utente di Yahoo è un insieme piuttosto esteso di strumenti JavaScript per gli sviluppatori. Spesso lasciati inosservati sono alcuni altri componenti utili della libreria che velocizzeranno la tua codifica: alcune librerie CSS. Oggi vorrei fare un tour della libreria CSS YUI Grids.

---

Perché?

Perché dovresti prendere in considerazione l'utilizzo della libreria CSS YUI Grids (di seguito "griglie YUI")? Cosa lo distingue? Non ho esaminato estensivamente altre librerie di griglie, ma trovo queste cose avvincenti:

• Buone convenzioni di denominazione

  Le griglie YUI utilizzano ID e classi facili da ricordare e puliscono il markup; una volta appresa, potresti tornare al tuo codice in un mese e sapere quali parti provengono da YUI e cosa fa ogni pezzo.

• Hosting di file gratuito

  Questo riduce il carico due volte: non è necessario ospitare il file sul server, ma anche un caricamento più veloce della pagina se il client ha il file memorizzato nella cache.

• Compatibilità con dimensioni di annunci comuni

  Yahoo ha sfornato le larghezze della barra laterale che corrispondono alle linee guida degli annunci di Interactive Advertising Bureau.

• Molte opzioni di layout

  Con più modelli e la possibilità di annidare le regioni delle pagine, Yahoo afferma di offrire oltre 1000 combinazioni di layout ... tutte in meno di 5kb.

Certo, le griglie YUI non sono perfette. È un po 'limitante quando si tratta delle larghezze della barra laterale pre-cotta; tuttavia, se si adattano alle tue esigenze, risparmierai tempo, codifica e grattacapi quando stendi il tuo sito.

---

risorse

Quando iniziamo, ecco alcune risorse che saranno di aiuto.

• La home page CSS di YUI Grids: il posto dove andare dopo aver letto questo articolo
• The Grids Builder: uno strumento che ti consente di creare la tua pagina con pochi clic: un grande aiuto per ottenere rapidamente il blocco delle griglie YUI!
• Il cheat sheet: un PDF a pagina singola con tutte le convenzioni delle griglie YUI

---

Costruzioni

Prima di entrare nella nitida griglia, guardiamo gli elementi costitutivi delle griglie YUI. Ci sono cinque diverse strutture con cui lavorerai per sviluppare il tuo layout; ognuna di queste strutture è definita da un id o da una classe (di solito una classe). Sono come segue:

1. Documento
2. Modello
3. blocchi
4. griglie
5. unità

---

Documento

Ovviamente, il tuo intero file HTML è il documento, ma nel nostro caso, è anche il div immediatamente all'interno del corpo - il div che contiene tutto. Questo è dove si definisce la larghezza del tuo sito. Le griglie YUI ti offrono 4 opzioni di larghezza: 750px, 950px, 100% o 974px. Queste larghezze non sono in realtà pixel codificati; sono ems, quindi la pagina si adatterà fluidamente quando l'utente modificherà le dimensioni del carattere. Se questi non lo riducono, Yahoo ha reso la definizione di una larghezza personalizzata un gioco da ragazzi. Ecco il codice per creare un documento di 800 px di larghezza:

# custom-doc margin: auto; / * questi due valori sono obbligatori, come * / text-align: left; / * aiutano le griglie YUI centrano la pagina * / larghezza: 61.54em; / * 800px / 13 = valore em per la maggior parte dei browser * / * larghezza: 60,00em; / * 800px / 13.333 = valore em per IE * / larghezza minima: 800px; / * opzionale, ma consigliato * /

Per impostare la larghezza, usa semplicemente id di doc, doc2, doc3 o doc4, rispettando i valori sopra indicati.

---

Modello

Ci sono sette modelli tra cui scegliere. I primi sei definiscono un layout a due colonne; ognuno ha una larghezza o un orientamento diverso per la barra laterale, con la colonna del contenuto principale che occupa il resto della larghezza del documento. I modelli sono 1) 160 px a sinistra, 2) 180 px a sinistra, 3) 300 px a sinistra, 4) 180 px a destra, 5) 240 px a destra e 6) 300 px a destra. Per ottenere il modello desiderato, è sufficiente aggiungere una classe di yui-t # allo stesso div su cui hai definito il tuo documento (sostituisci il # con i numeri sopra). Come accennato in precedenza, queste barre laterali sono larghezze standard del web-annuncio, quindi qualsiasi pubblicità dovrebbe adattarsi comodamente al loro interno.

Il settimo template-yui-t7-non è ben documentato (stranamente, non è sul cheat sheet che ho collegato sopra, ma è su questa versione precedente). Sottrae la barra laterale, dandoti semplicemente una colonna a larghezza intera (che può essere divisa in colonne in seguito).

---

blocchi

I blocchi sono la manifestazione effettiva delle colonne definite nel modello. Sono semplicemente due div all'interno del doc div, entrambi classificati con yui-b. Fortunatamente, non devono essere figli immediati del principale div; Yahoo dà questo esempio:

 
 
 <-- Header Content --> 
 
 
 
 <-- Main Content --> 
 
 
 <-- Sidebar Content --> 
 
 
 <-- Footer Content --> 
 
 

Puoi vedere dall'esempio che non hai bisogno di mettere i blocchi direttamente all'interno del div di root. Ciò ti consente di avere un'intestazione e un piè di pagina a larghezza intera, che è generalmente una buona idea. Noterai che il blocco del contenuto principale è all'interno di un div con un id di yui-main; Le griglie di YUI lo fanno per darti la possibilità di avere la tua barra laterale o la tua colonna principale prima nel tuo codice, il che può essere un vantaggio quando stai considerando la SEO o l'accessibilità.

---

Griglie e unità

Ho raggruppato griglie e unità insieme perché sono molto simili; entrambi sono div. Una griglia (definita con classe yui-g) fondamentalmente dice a 2 bambini (di solito unità) di dividere la sua larghezza in modo uniforme. Un'unità (classe yui-u) dovrebbe sempre essere il figlio di una griglia e il genitore dei tuoi contenuti.

Quindi, qual è la differenza tra un blocco e una griglia?

• blocchi
  • Sono usati solo per definire le colonne generali della pagina
  • Vengono utilizzati solo se si utilizzano i modelli da 1 a 6
  • Vengono usati una sola volta (quindi non si dovrebbero mai avere più di 2 divs.yui-b su una sola pagina)
• griglie
  • Sono usati per dividere le aree (come il blocco principale o un'altra griglia) in colonne
  • Sono usati su qualsiasi modello
  • Sono annidabili

Inoltre, ogni volta che si hanno più griglie o unità all'interno di una griglia, è necessario dare al primo una classe di prima. Questo perché non tutti i browser offrono la pseudo-classe: first-child.

Ma cosa succede se si desidera dividere una griglia in modo non uniforme? La vita non è sempre giusta, vero? Fortunatamente, YUI offre una serie di alternative alla classe yui-g. Ecco una lista degli altri:

• yui-gb : Prende 3 unità e divide equamente
• yui-gc : Prende 2 unità e divide come 2/3 e 1/3
• yui-gd : Prende 2 unità e si divide in 1/3 e 2/3
• yui-ge : Prende 2 unità e si divide in 3/4 e 1/4
• yui-gf : Prende 2 unità e divide come 1/4 e 3/4

Questo è tutto di loro; solo schiaffo 2 o 3 unità in ciascuna delle griglie precedenti e avrai colonne disuguali.

---

Esempio di base

Bene, ora che conosci le corde, esaminiamo un esempio di base. Diciamo che vogliamo il layout standard del sito - sai, colonna del contenuto principale con una barra laterale a destra - con un po 'di twist: divideremo la colonna principale in due più piccoli e dividere uno di quelli in due.

Come ho detto, Yahoo offre hosting per questo framework, ed è generalmente una buona idea approfittarne. Inoltre, Yahoo consiglia il Doctype rigido HTML 4.01, quindi è quello che ho inserito. Ecco cosa iniziamo con:

---

Passaggio 1: Documenti e blocchi

Il primo passo è impostare il nostro documento div e blocchi. Possiamo restare fedeli alla prima larghezza del documento (750 px) e andare con il modello 6, che ci offre una barra laterale destra di 300 px.

Per i due Bserrature di contenuti, abbiamo bisogno di aggiungere due divs.yui-b. Creeremo la prima colonna più grande, avvolgendola con div # yui-main.

 
 
 IL MIO CONTENUTO PRINCIPALE DIV 
 
 
 IL MIO SIDEBAR DIV 
 

Super! Quindi, ecco quello che abbiamo finora: mi sono preso la libertà di acconciarlo un po ', così puoi vedere cosa sta succedendo.

---

Passaggio 2: griglie e unità

Non è ancora troppo impressionante, ma ci arriveremo. Ora dividiamo la colonna più grande in due. Possiamo ottenere questo risultato inserendo un div.yui-g (che sta controllando due unità) al suo interno:

 
 
 
 Prima sotto-colonna 
 
 Seconda sottocolonna 
 
 
 

Questo ci dà due colonne a sinistra; Non male; dividiamo la seconda di quelle colonne in due. Per fare ciò, dobbiamo cambiarlo in una griglia e inserirvi due unità.

 Prima sotto-colonna 
 
 
 Prima sotto-colonna 
 
 Seconda sotto-colonna secondaria 
 

Questo è un grande esempio del fatto che le griglie e le unità sono di pari rango e possono stare fianco a fianco: differiscono solo nell'uso.

---

Un Gotcha

Questo mi porta a un guaio di imbottiture (che seguirà un grande vantaggio delle griglie YUI). Per prima cosa, guarda il codice che abbiamo scritto finora, con un testo di riempimento:

Il tuo buon gusto dovrebbe notare la mancanza di imbottitura attorno ai bordi delle nostre colonne. Ma ciò può essere facilmente risolto con alcuni padding, ad esempio 0.5em-on .yui-u, giusto?

Yikes! Le griglie YUI hanno impostato le larghezze per questi div, e poiché il padding si aggiunge alla larghezza di div, abbiamo un problema di overflow. Una soluzione facile a questo è aggiungere l'imbottitura ai bambini immediati del .yui-u.

Per mantenere le nostre colonne in linea e facilmente leggibili, inseriremo il padding nei paragrafi all'interno di .yui-u. Ma non devo mostrarti un'immagine di quello per te per capire che le nostre colonne strette sono diventate più strette. È qui che possiamo trarre vantaggio da un punto di forza delle griglie YUI. Cambiamo l'id sul nostro div root da doc a doc2. Ecco un prima e un dopo:

Aggiungendo un carattere al nostro HTML, possiamo facilmente sperimentare con un layout più ampio; questa è la bellezza delle griglie YUI. # doc2 è 200px più largo di #doc, quindi ora i nostri paragrafi stretti sono di una larghezza comoda.

---

Esempio complesso

Questo è un esempio piuttosto semplice; Diamo un'occhiata a uno più complesso ... che non è davvero più difficile da creare. Inizieremo con il settimo modello, una singola colonna, con un documento di 750 pixel (#doc) e lo suddividiamo in modo diverso su più righe. Ecco cosa iniziamo con:

Poiché non utilizziamo i modelli 1 - 6 (che hanno barre laterali), non abbiamo bisogno di avere divs.yui-b. Possiamo iniziare proprio con alcuni divs.yui-g; aggiungeremo 4: