Crash Course YUI Grids CSS

Yahoo-brukergrensesnittbiblioteket er et ganske omfattende sett med JavaScript-verktøy for utviklere. Ofte igjen ubemerket er noen andre nyttige komponenter i biblioteket som vil fremskynde kodingen din: noen CSS-biblioteker. I dag vil jeg gjerne gi deg en tur på YUI Grids CSS-biblioteket.

---

Hvorfor?

Hvorfor bør du til og med vurdere å bruke YUI Grids CSS biblioteket (heretter referert til "YUI grids")? Hva gjør det skiller seg ut? Jeg har ikke sett mye på andre nettbiblioteker, men jeg finner disse tingene overbevisende:

• Gode ​​navngivningskonvensjoner

  YUI-nettene bruker lett-å-huske ids og klasser, og ren markering; Når du lærer det, kan du komme tilbake til koden din om en måned og vite hvilke deler som er fra YUI og hva hver del gjør.

• Gratis fil hosting

  Dette reduserer belastningen to ganger: det er ikke nødvendig å være vert for filen på serveren din, samt raskere sideopplasting hvis klienten har filen cached.

• Kompatibilitet med vanlige annonsestørrelser

  Yahoo har bakket i sidebjeldbredder som samsvarer med Interactive Advertising Bureaus retningslinjer for annonsering.

• Mange oppsettalternativer

  Med flere maler og muligheten til å nest sideområder, hevder Yahoo å tilby over 1000 layoutkombinasjon ... alt på mindre enn 5kb.

Selvfølgelig er YUI-nettene ikke perfekte. Det er litt begrensende når det gjelder de pre-bakte sidebarbreddene; Men hvis de passer dine behov, sparer du mye tid, koding og hodepine når du legger ut nettstedet ditt.

---

ressurser

Som vi begynner, her er noen ressurser som vil være til hjelp.

• YUI Grids CSS hjemmeside: stedet å gå etter at du har lest denne artikkelen
• Grids Builder: et verktøy som lar deg bygge din side med noen få klikk - stor hjelp til å få tak i YUI-nettene raskt!
• Cheat sheet: en enkeltsidet PDF med alle YUI grids konvensjonene

---

Byggeklosser

Før vi kommer inn i det nitty griddy, la oss se på byggeblokkene til YUI-gridene. Det er fem forskjellige strukturer som du vil jobbe med for å utvikle oppsettet ditt. Hver av disse strukturene er definert av enten et id eller en klasse (vanligvis en klasse). De er som følger:

1. Dokument
2. Mal
3. blokker
4. Rister
5. enheter

---

Dokument

Åpenbart er hele HTML-filen dokumentet, men i vårt tilfelle er det også div umiddelbart i kroppen - div som holder alt. Her definerer du bredden på nettstedet ditt. YUI-nett gir deg 4 breddealternativer: 750px, 950px, 100% eller 974px. Disse breddene er egentlig ikke hardkodede piksler; de er ems, så siden vil justere flytende når brukeren justerer skriftstørrelsen. Hvis disse ikke kutter det, har Yahoo gjort definere en tilpasset bredde en bris. Her er koden for å lage et dokument 800px bredt:

# tilpasset-doc margin: auto; / * Disse to verdiene er påkrevd, som * / text-align: left; / * de hjelper YUI grids senter siden * / bredde: 61.54em; / * 800px / 13 = em-verdi for de fleste nettlesere * / * bredde: 60.00em; / * 800px / 13.333 = em-verdi for IE * / min-bredde: 800px; / * valgfritt, men anbefalt * /

For å angi bredden, bruk bare id av doc, doc2, doc3 eller doc4, henholdsvis til de ovenfor angitte verdiene.

---

Mal

Det er sju maler å velge mellom. De første seks definerer en to kolonne layout; hver har en annen bredde eller orientering for sidefeltet, med hovedinnholds-kolonnen tar opp resten av dokumentets bredde. Malerne er 1) 160px til venstre, 2) 180px til venstre, 3) 300px til venstre, 4) 180px til høyre, 5) 240px til høyre og 6) 300px til høyre. For å få malen til din ønske, legg til en klasse av yui-t # til samme div som du definerte dokumentet ditt på (erstatt # med tallene ovenfor). Som nevnt ovenfor, er disse sidebjelkene standardbredder for webannonser, så reklame skal passe godt inn i dem.

Den syvende mal-yui-t7 er ikke så godt dokumentert (merkelig, det er ikke på cheat sheet jeg koblet til ovenfor, men det er på denne eldre versjonen). Den trekker sidebjelken, og gir deg en full bredde kolonne (som kan deles inn i kolonner senere).

---

blokker

Blokkene er den faktiske manifestasjonen av kolonnene du definerte i malen. De er bare to diver innenfor doc div, begge klassifisert med yui-b. Heldigvis behøver de ikke å være umiddelbare barn av den største diven; Yahoo gir dette eksempelet:

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

Du kan se fra eksemplet at du ikke trenger å sette blokkene direkte inne i root div. Dette gjør det mulig å ha en header og en footer i full bredde, som vanligvis er en fin ide. Du vil legge merke til at hovedinnholdsblokken er inne i en div med et id for yui-main; YUI-nett gjør dette for å gi deg muligheten til å ha enten sidebjelken eller hovedkolonnen din først i koden din, noe som kan være en fordel når du vurderer SEO eller tilgjengelighet.

---

Grids & Units

Jeg har gruppert grids og enheter sammen fordi de er veldig ganske liknende; begge er divs. Et rutenett (definert med klasse yui-g) forteller i utgangspunktet 2 barn (vanligvis enheter) for å dele bredden jevnt. En enhet (klasse yui-u) bør alltid være barn av et rutenett og foreldre av innholdet ditt.

Så, hva er forskjellen mellom en blokk og et rutenett?

• blokker
  • Brukes kun til å definere generelle sidekolonner
  • Brukes kun hvis du bruker maler 1 - 6
  • Brukes kun en gang (så du bør aldri ha mer enn 2 divs.yui-b på en side)
• Rister
  • Brukes til å dele områder (for eksempel hovedblokken eller et annet grid) i kolonner
  • Brukes på en hvilken som helst mal
  • Er nestable

Også, når du har flere grids eller enheter i et rutenett, er det nødvendig å gi den første en klasse først. Dette skyldes at ikke alle nettlesere tilbyr pseudoklassen: første barn.

Men hva om du vil dele et rutenett ujevnt? Livet er ikke alltid rettferdig, er det? Heldigvis tilbyr YUI en rekke alternative valg til yui-g-klassen. Her er en liste over de andre:

• yui-gb : Tar 3 enheter og deler like mye
• yui-gc : Tar 2 enheter og deler som 2/3 og 1/3
• yui-gd : Tar 2 enheter og deler som 1/3 og 2/3
• yui-ge : Tar 2 enheter og deler som 3/4 og 1/4
• yui-gf : Tar 2 enheter og deler som 1/4 og 3/4

Det er alle av dem; bare luk 2 eller 3 enheter i hvert av de ovennevnte gridene, og du vil ha ulik kolonner.

---

Grunnleggende eksempel

Vel, nå som du kjenner tauene, la oss gå over et grunnleggende eksempel. La oss si at vi vil ha standard sideoppsett - du vet, hovedinnholdskolonne med et sidebar til høyre - med litt vri: Vi deler hovedkolonnen i to mindre, og deler en av disse videre i to.

Som nevnt tilbyr Yahoo hosting for dette rammeverket, og det er vanligvis en god ide å dra nytte av det. Også, Yahoo anbefaler HTML 4.01 strenge Doctype, så det er det jeg har satt inn. Her er det vi starter med:

---

Trinn 1: Dokumenter og blokker

Det første trinnet er å sette opp vårt dokument div og blokker. Vi kan holde fast med den første docbredden (750px), og gå med mal 6, som gir oss en 300px høyre sidebar.

For de to blås av innhold, vi må legge til to divs.yui-b. Vi lager den øverste en større kolonne ved å pakke den inn med div # yui-main.

 
 
 MIT HOVEDINNEHOLD DIV 
 
 
 MIN SIDEBAR DIV 
 

Super! Så, her er det vi har så langt: Jeg har tatt friheten til å stylere den litt, så du kan se hva som skjer.

---

Trinn 2: Grids and Units

Det er ikke så imponerende ennå, men vi kommer dit. La oss nå dele den større kolonnen i to. Vi kan oppnå dette ved å sette en div.yui-g (som foreldre to enheter) inne i den:

 
 
 
 Første underkolonne 
 
 Andre underkolonne 
 
 
 

Dette gir oss to kolonner til venstre; ikke verst; la oss dele den andre av disse kolonnene i to. For å gjøre dette må vi bytte det til et rutenett, og sette to enheter inn i det.

 Første underkolonne 
 
 
 Første under-under-kolonne 
 
 Andre under-under-kolonne 
 

Dette er et godt eksempel på at nett og enheter er likeverdige og kan stå ved siden av hverandre: de varierer bare i bruk.

---

En Gotcha

Dette bringer meg til en padding gotcha (som vil segue til en stor fordel av YUI grids). Først, se på koden vi har skrevet så langt, med litt fillertekst:

Din gode smak bør legge merke til mangelen på polstring rundt kantene på våre kolonner. Men det kan enkelt løses med noe polstring-si, 0.5em-on .yui-u, høyre?

Yikes! YUI grids har satt breddene for disse divs, og fordi polstring legger til bredden på div, har vi et overløpsproblem. En enkel løsning på dette er å legge polstring til de nærmeste barna til .yui-u.

For å holde kolonnene våre på linjen og lett lesbare, legger vi polstringen på avsnittene i .yui-u. Men jeg trenger ikke vise deg et bilde av det for at du skal finne ut at våre smale kolonner bare har blitt smalere. Det er her vi kan dra nytte av et sterkt poeng med YUI-nett. La oss endre ID på vår root div fra doc til doc2. Her er en før og etter:

Ved å legge til ett tegn til HTML-en, kan vi enkelt eksperimentere med et bredere layout; det er skjønnheten i YUI-nettet. # doc2 er 200px bredere enn #doc, så nå er våre smale avsnitt en behagelig bredde.

---

Kompleks eksempel

Det er et ganske enkelt eksempel; la oss se på en mer kompleks en ... det er egentlig ikke noe vanskeligere å skape. Vi starter med den syvende malmen - en enkelt kolonne - med et 750px bredt dokument (#doc) og skar det annerledes over flere rader. Her begynner vi med:

Fordi vi ikke bruker maler 1 - 6 (som har sidebars), trenger vi ikke å ha noen divs.yui-b. Vi kan starte rett inn med noen divs.yui-g; vi legger til 4: