Share
Vi er allerede kjent med 12- og 16-kolonnevarianter av 960.gs, men visste du at et 24-kolonne alternativ også eksisterer? I denne artikkelen vil du mestre 960-nettverket ved å dissekere 24-kolonneversjonsdemoen. Hvis du bare har brukt 960gs før for Photoshop mockups, bør du vurdere dette din heldig dag. Ved slutten av denne artikkelen vil du kunne konvertere designene dine til HTML og CSS på kort tid.
En 960 Grid System Master-Det er det du vil ha etter at du har gått gjennom denne artikkelen. Og selv om vi skal bruke 24-kolonne varianten av 960gs, vil du helt forstå hvordan de to eldre typer (dvs. 12 og 16 kolonner) fungerer også, ved å bruke de samme prinsippene du vil lære her . Men først ta en titt på 24-kolonne demo på 960gs-siden, da det er alt vi trenger i spranget mot mestring av denne populære CSS-rammen.
Vi må først sjekke HTML-koden til demoen, så se kilden. Hvis du bruker Chrome, Firefox eller Opera, trykker du bare på ctrl + U; Hvis du bruker Internet Explorer, endrer du nettleseren din! :) (på Mac, bruk cmd + U for Firefox og opt + cmd + U for Safari og Opera; Chrome har bare høyreklikkalternativet). Hold HTML-kildekodevinduet på skrivebordet ditt, da vi skal referere til det fra tid til annen.
Deretter må du laste ned 960.gs-filene (hvis du ikke har gjort det ennå), og åpne den ukomprimerte CSS-filen 960_24_col.css. Vi må gjøre dette fordi demo CSS er komprimert, og vil være vanskelig å inspisere. (Hvis du er masochistisk typen, vær så snill å bruke demoens CSS i stedet.
Det er stort sett alt vi trenger for å forberede, bortsett fra en halvfungerende hjerne. Nå finner du at demonstrasiden inneholder nøkkelen til å forstå nettverket, og vi begynner med å undersøke de tre seksjonene.
De tre seksjonene består av følgende:
Først har vi et toppområde som viser to kolonner for hver rad, hvor den venstre kolonnen blir bredere ettersom den høyre kolonnen blir smalere til de er like store.
Deretter har vi en mellomstore del som viser en 30 px firkant som gradvis beveger seg fra venstre mot høyre, mens hvite plass før og etter det strekker seg for å ta opp hele 960px bredden.
Endelig er det en bunnseksjon som viser to rader rektangler med forskjellige størrelser, som deler 960px bredden i to halvdeler.
Tro det eller ikke, forstå helt hva de tildelte klassene bak disse kolonnene gjør, er alt du trenger for å få en fast forståelse av 960-nettverket. Er det ikke så bra? La oss undersøke hvert avsnitt videre.
Accentsconagua
grid_1 til grid_24 klasserPeeking ved kilden til denne delen viser oss det først, før noen av grid_xx klasser ble tildelt, klassen container_24 ble gitt til den samlede innpaknings diven:
24 kolonne grid
...
Betydningen av denne klassen kan ikke overemphasized-det dikterer delvis bredden på kolonnene hvor a grid_xx klassen er tildelt. Og som du kanskje har gjettet, deler den også 960px bredden i 24 kolonner.
(På samme måte setter container_12 eller container_16 øverst vil "dele" bredden i henholdsvis 12 og 16 kolonner. Ordet dele opp er i sitater fordi det egentlig ikke gjør det; Du vil se senere hvordan denne prosessen er oppnådd.)
Når du går videre, vil du legge merke til at den øverste raden har en enkelt div med en klasse av grid_24. De resterende rader i toppseksjonen har to divs hver: venstre divs spenner fra klasse grid_1 opp til grid_12, og de riktige divene spenner fra grid_23 ned til grid_12; Summen av de to klassene i hver rad er 24.
950
30
910
70
430
510
470
470
Slik er den tilordnede grid_xx klasser ville se ut hvis vi prøvde å visualisere hver divs klassenavn:
Du har kanskje lagt merke til i koden at etter den siste div på rad har vi en tom div med en klasse av klar. Ignorer det for nå, vi skal håndtere det senere.
Deretter la vi se på hva som skjer bak kulissene, dvs. i CSS, når vi tildeler container_24 klasse:
.container_24 margin-left: auto; margin-høyre: auto; bredde: 960px;
Som du kan se, klassifiseres denne klassen, som ble tildelt den samlede innpakningsdelen av dokumentet, vårt arbeidsområde og gir det en bredde på 960 px. Lett nok.
Deretter er det her grid_xx klasser, som ble plassert på hoveddelene av toppseksjonen:
.grid_1,. grid_2, .grid_3, ... grid_23, .grid_24 display: inline; flyte: venstre; margin-venstre: 5px; margin-høyre: 5px;
Vi ser at grid_xx klasser gir kolonnene venstre og høyre margin på 5px hver, som danner en 10px renn når du plasserer kolonnene side om side. Dette i sin tur oppnås ved å flyte dem alle til venstre.
De blir også gitt a vise av på linje, for å forhindre at Double Margin Float Bug blir utløst i vår kjære nettleser. (Tilsynelatende utløses det når du flyter et element som har marginer tildelt det.)
Til slutt har vi etterkommere selektorer dannet av en kombinasjon av container_24 og grid_xx klasser:
.container_24 .grid_1 bredde: 30px; .container_24 .grid_2 width: 70px; ... container_24 .grid_23 bredde: 910px; .container_24 .grid_24 width: 950px;
Som du kan se, er disse CSS-deklarasjonene de som faktisk bestemmer bredden på kolonnene hvor a grid_xx klassen er tildelt. Dette er hvordan tildeling container_24 øverst "deler" bredden i 24 kolonner - de forhåndsinnstilte breddestørrelsene er tildelt i henhold til hvilke container_xx klasse a grid_xx klassen er kombinert med.
Til sammenligning, her er hvordan dens motparts CSS-deklarasjoner i 16-kolonnevarianten ser ut som:
.container_16 .grid_1 width: 40px; .container_16 .grid_2 width: 100px; .container_16 .grid_3 width: 160px;
Hvis du sammenligner HTML-kildekoden til demoen for 12- og 16-kolonnene med 24-kolonne demo, vil du legge merke til at det ikke er noen forskjell på hvordan grid_xx klasser ble tildelt. Og nå vet du hvorfor dette er så-det er ikke det grid_xx klasse som bestemmer bredden på kolonnene, men dens kombinasjon med a container_xx klasse, som vist i CSS ovenfor.
En annen ting verdt å merke seg her er den faktiske størrelsen på hver container når du tilordner en grid_xx klasse. Selv om det er merket 30, 70, 110, og så videre i demonstrasjonen, er det faktisk 10px mer på grunn av venstre og høyre margin på hver side av beholderen.
Som du kan se,
Å se det på denne måten tilfredsstiller matematikken vi har for bredden: de 24 40px brede kolonnene er lik 960px (dvs. 40px * 24 = 960px).
Denne visningen viser mer nøyaktig hva CSS faktisk gjør ved oppslaget. Selv om beholderens størrelse er egentlig bare 30px, 70 piksler, 110px, og så videre (som det er merket i demoen), hjelper det å vite at de horisontale margenene er grunnen til at summen av breddene for hver rad ikke er lik 960px. (Den utgjør bare 940px, unntatt den første raden, tildelt a grid_24, som spenner over 950 px. Den "tapte" 20px for alle de andre divene regnes av de venstre og høyre 5px-margene, og 10px-rennen mellom de 2 kolonnene for hver rad.)
Men her er det mer praktiske å huske: Så lenge du bruker 24-kolonne psd-mal når du lager dine design (eller 12 eller 16-kolonne psd-maler, for den saks skyld), kan du bare telle antall kolonner du vil ha for et bestemt designelement, bruk det nummeret for din grid_xx klassen, og kolonnen er satt. Hvis for eksempel logoen din tar opp fire kolonner, så gi den inneholdet div a grid_4 klasse.
Her er et eksempel på hvordan du bruker det:
Selv om 960.gs-siden (vist ovenfor) faktisk bruker 12-kolonne varianten, kan vi like godt legge over 24-kolonne mønsteret på den, og det vil fortsatt passe oppsettet perfekt (fordi 24-kolonne versjonen er selvsagt , bare 12-kolonneversjonen med kolonner delt med to).
Som du kan se, vet vi at vi har en 960px bredde delt inn i 24 kolonner, gjør livet enklere, da vi bare trenger å justere våre designelementer langs kantene på kolonnene, telle antall kolonner de okkuperer, sett det som vår grid_xx klassens nummer, og vi er ferdige.
Men hva om du vil ha mange tomme mellomrom i ditt design? Eller hva om du vil sentrere et lite designelement, og bare ha hvite mellomrom rundt den?
Tast inn prefix_xx og suffix_xx klasser.
prefix_xx og suffix_xx klasserHvis du sjekker oppmerkningen for den midterste delen, vil det du ser, variasjoner av denne koden:
30
… hvor prefix_xx + suffix_xx = 23. (Det vil si 0 + 23, 1 + 22, 2 + 21, 3 + 20 og så videre ...)
Hva skjer her?
Først vil du legge merke til at hver rad klassetildelinger utgjør 24 kolonner (grid_1 + kombinerte verdier av prefix_xx og suffix_xx klasser, som er 23).
Deretter ser du at prefix_xx klassene er i stigende rekkefølge (fra 1 til 23) mens suffix_xx klassene er synkende (fra 23 til 1). Også når prefix_xx eller suffix_xx har en verdi på 23, den har ikke en motpart suffix_xx eller prefix_xx klasse, fordi det ikke lenger trenger det (verdien er allerede 23).
Til slutt, hver av disse enhetene er 30px bred, og som vi har sett i grid_xx klasser over, har de også 10px horisontale marginer.
Vi vet allerede at tildele et element a grid_1 klassen gir den en 30px bredde og 5px paddings på hver side. Men hva gjør prefix_xx og suffix_xx klasser gjør?
Som du kanskje allerede har gjettet, de gir ekstra venstre (prefix_xx) og til høyre (suffix_xx) polstring, øker størrelsen på a grid_xx klassenhet. Og dermed, prefix_1, prefix_2, og prefix_3 vil gi elementet ditt venstre venstre paddings av 40px, 80px, og 120px, henholdsvis; mens samme mengde paddings er gitt til sin suffix_xx motstykker, men i motsatt side.
.container_24 .prefix_1 polstring-venstre: 40px; .container_24 .prefix_2 polstring-venstre: 80px; ... container_24 .suffix_1 polstring-høyre: 40px; .container_24 .suffix_2 polstring-høyre: 80px;
For hvite rom i designene, legg bare til prefix_xx og suffix_xx klasser. De låser opp innholdet ditt til en viss bredde (bestemt av grid_xx klasse du tildeler), mens plassen på hver side er fylt med polstring.
For et enkelt eksempel, la oss late som om at 960.gs hjemmeside bruker 24-kolonne varianten, og at den twitter-bird-grafikken er logoen til nettstedet.
Vi kan se at det har tre kolonner, så vi gir det en grid_3 klasse. La oss også anta at det ikke er noen andre elementer langs sin rad. Vi vil derfor også gi det en suffix_21 klasse (3 + 21 = 24), siden ekstra polstring må spenne hele bredden.
Tydeligvis, hvis det er andre elementer på den raden, må vi justere suffix_xx klassen for å skape litt plass til et annet element som spenner over noen grid_xx klasser (for eksempel et søkeskjema). Også, avhengig av hvor designelementene dine er plassert i forhold til venstre kant av rad, kan du også legge til en prefix_xx klasse.
Husk alltid: tallene som brukes i klassene for hver rad (enten Nett, prefiks, eller suffiks) bør være lik 24.
Deretter skal vi utføre litt "magi", ettersom det neste settet av klasser tillater at innholdet ditt vises annerledes enn hva oppslaget antyder det ville.
pull_xx og For denne delen, hvis du ikke bruker Firefox for øyeblikket, vil jeg gjerne be deg om å bytte til den midlertidig, ettersom du forstår de neste konseptene bedre med Chris Pedericks Web Developer Toolbar (WDT) -utvidelse for Firefox. (Hvis du ikke har installert det ennå, er det nå på tide å laste ned og installere det. Jeg forstår at det allerede er en Google Chrome-versjon av WDT, men etter min mening er det ikke i nærheten av Firefox-motparten.)
Når du kjører Firefox med WDT allerede installert, går du tilbake til demonstrasjonssiden på 24 kolonner, og ruller ned til selve bunnen. Du får se de to gruppene av bokser jeg viste deg for en stund siden, forskjellig størrelse, men passer sammen for å danne denne siste delen av demoen.
Nå sjekk ut HTML-koden for denne delen:
230
230
30
430
30
430
230
230
Sammenlign det igjen med det du ser på demoversiden.
Hva skjer her? Skal ikke den første gruppen av bokser (230-230-30-430) vises før den siste gruppen (30-430-230-230), som i oppslaget?
Vel, det er kraften til push_xx og pull_xx klasser. Men før vi går inn i dem, gå til WDT, klikk på Informasjon knappen, og velg Display Div Order, bare for å sikre at du ser riktig hvordan CSS påvirker oppslaget.
Her er et skjermbilde av hva du bør se:
Jeg trengte å vise dette for å demonstrere at de to gruppene er delt inn i venstre og Ikke sant sider, og ikke topp og bunn. Denne oppfatningsfeilen er lett å gjøre (som jeg gjorde) fordi: (1) vi er vant til å se div-grupper som strekker hele 960px bredden; og (2) de to gruppene har like store bokser som er lett å forveksle med hverandre.
(Nathan Smith, 960gs skaperen, kunne nok ha brukt bokser med forskjellige størrelser, for eksempel. 70-390-190-270 og 230-230-30-430-for å oppnå samme effekt og ville ha unngått den potensielle forvirringen, men han gjorde det ikke ...)
Men nå har du sett hvordan den første gruppen (som det fremgår av oppslaget) ble "presset" og hvordan den andre gruppen ble "trukket" av disse klassene, sjekk ut CSS for å se hvordan de gjør det:
.push_1, .pull_1, .push_2, .pull_2, ... push_22, .pull_22, .push_23, .pull_23 posisjon: relative; ... container_24 .push_1 left: 40px; .container_24 .push_2 left: 80px; ... container_24 .push_22 left: 880px; .container_24 .push_23 left: 920px; ... container_24 .pull_1 left: -40px; .container_24 .pull_2 left: -80px; ... container_24 .pull_22 left: -880px; .container_24 .pull_23 left: -920px;
For det første, å gi disse to klassene til HTML-elementer posisjonerer disse elementene relativt, slik at vi kan flytte divs til venstre, Ikke sant, topp, eller bunn i forhold til hvor det normalt ville forekomme i dokumentet. (Mer om CSS posisjonering her.)
Deretter i kombinasjon med container_24 klasse, den pull_xx klasser gir div a negativ venstre polstring, som gjør det mulig å "trekke" divens innhold til venstre. På den annen side, push_xx klasser, som forventet, gjør motsatt og gir div a (positiv) venstre polstring for å "skyve" innholdet til høyre (ved å gi vei til venstre polstring).
"Men hvorfor bryet?" Kan du spørre. "Hvorfor ikke bare sette dem i riktig rekkefølge i markeringen i utgangspunktet, så du trenger ikke å bruke disse unødvendige klassene?"
Gode spørsmål. Svaret ligger i jakten på å ha semantisk og tilgjengelig markering - våre design bør ikke tvinge oppmerkningen til en struktur som ikke gir mening eller ikke er opp til standarder når stylingene er slått av. Og CSS har blitt bevist å håndtere slike situasjoner elegant - det lar oss oppnå utseendet på designene våre, uansett hvordan oppmerkningen ble skrevet (vel, i stor grad).
På 960gs-siden viser Nathan Smith toppteksten som et godt eksempel på hvordan han brukte disse klassene:
På overflaten kan vi tro at oppslaget viser Twitter-logoen først, deretter nedlastingslinken, og til slutt 960-logoen. Men det ville ikke være semantisk - tittelen på nettstedet (det vil si 960 logo) skulle komme inn først. Og som du sikkert vet, har dette arrangementet også SEO-fordeler. Så, merket for toppteksten, går faktisk noe som:
960 Grid System
Last ned - Maler: Acorn Fyrverkeri, Flash, ...
Som du kan se, kommer logoen først, og etter det, nedlastingslenken. (Merket for Twitter-logoen er funnet etter bunnteksten, ble gitt et id av twitter, og er helt posisjonert. Det ble ikke gitt en 960.gs klasse, så vi vil ikke bekymre oss om det.)
Du så også i markeringen (som antydet) at logoen ble presset og nedlastingskoblingen ble trukket. For å visualisere det tydeligere:
Og det er slik du bruker trykk eller dra klasser - vet at de enten gir dine divs en negativ eller positiv venstre polstring, deretter "trekk" eller "trykk" innholdet ditt i henhold til antall kolonner du trenger innholdet ditt til å bli trukket eller presset.
Det er ett siste sett med klasser som er integrert i 960.gs-og de lar deg lage kompliserte layouter. En kolonne som spenner over flere rader, for eksempel. La oss takle dem neste.
alfaogomegaklasserHvis du har lest opplæringer eller artikler på 960.gs før, vet du sannsynligvis allerede nå at alfa og omega klasser avbryter de horisontale paddings satt av grid_xx klasser. Og mest sannsynlig vet du også at deres primære bruk ligger når du har grid_xx klasser inne nestede divs.
Til fordel for de som ikke vet ennå, la oss gå til vårt CSS og se hva disse klassene gjør til elementene de er tildelt til:
.alfa margin-left: 0; .omega margin-right: 0;Ganske enkelt - de bare null ut til venstre (alfa) og til høyre (omega) marginer. Og som vi har sett for en stund siden, når vi tildeler et element a grid_xx klasse, gir vi det automatisk horisontale marginer på 5 sider på begge sider. Med nestede div, ønsker vi ikke å doble disse margene, så vi gir en alfa eller en omega klasse, eller begge deler, tilsvarende.
En nestet div som rører den venstre kanten av sin overordnede div vil bli gitt alfa klasse. På samme måte, omega klassen er tildelt den nestede div som er plassert på foreldre div sin høyre kant. Men hva om vi har en nestet div som berører begge kantene av sin foreldres div? Det stemmer, vi tildeler begge klassene til det.
La oss gå videre til et eksempel slik at du kan se hvordan det er gjort.
Selv om det ikke er vist i 960.gs demo, er det et eksempel på hvordan et komplekst layout oppnås ved hjelp av alfa og omega klasser (og nestede divs med grid_xx klasser):
Her har vi kolonner som spenner over flere rader på begge sider, med rader og bokser i midten. Du kan også visualisere det som en typisk 3-kolonne layout; men for vårt eksempel bruker vi bare 15 kolonner. Selvfølgelig kan du enkelt utvide den til 24 kolonner.
Nøkkelen til å lage oppsett som disse i 960.gs er å:
- Husk at 960.gs gjør oppsettet mulig med flytende divs til venstre.
- Opprett de nestede divene dine fra de første floated divs. Dette betyr at du har floated divs innen floated divs.
Her er en måte å nærme seg vårt oppsett på: Grupper dem inn i tre kolonner først, og tilordne dem passende grid_xx klasser:
Deretter tilordne tillegget grid_xx klasser for de nestede divs (merk at vi ikke har noen nestet div til høyre kolonne):
Siden vi har minst to nivåer av grid_xx klasser i nestede div, må vi også legge til alfa og omega klasser riktig:
De nestede divene i den venstre kolonnen berører begge kantene av sin overordnede div, så vi må legge til både alfa og omega. Det samme gjelder for divs med grid_8 klasser i midtseksjonen. Men hver grid_4 div på toppen må bare ha alfa eller omega, siden det bare berører enten den venstre eller høyre kanten av dens foreldre div.
Som du kanskje har konkludert med fra dette enkle eksempelet, kan du hekke divs med grid_xx klasser så dypt som du vil ha (hvis designet krever det), så lenge du markerer dem riktig, og gi dem de riktige 960.gs-klassene, slik at de blir flatt riktig og eventuelle overskytende marginer blir kansellert.
Og når det gjelder flyter, gjør den siste gruppen av 960.gs-klasser, men ikke unik for 960.gs, alt mulig - de sletter flyter som automatisk opprettes når du tilordner en grid_xx klasse.
Leveling feltet: The
klarklasserTidligere merket vi dette i oppslaget - hver div som ble gitt en grid_xx klassen, som også var den siste diven for sin rad, ble etterfulgt av en tom div med en klasse av klar.
190
750
230
710
No-brainer årsaken til dette er at vi trenger å rydde flytende divs, fordi når vi flyter dem, tar de ikke lenger plass, noe som gjør at elementene under det blir "trukket opp", noe som til slutt fører til et ødelagt layout.
Som vi har sett i demonstrasjonen, er en løsning for dette potensielle problemet å plassere en ekstra ikke-semantisk div med en klasse av klar, som gjør følgende:
.fjern clear: both; skjerm: blokk; overløp: skjult; synlighet: skjult; bredde: 0; høyde: 0;Koden ovenfor er i utgangspunktet Nathan Smiths egen løsning på problemet, som omtalt i hans blogg. Mange webdesignere har ingen problemer med det, bortsett fra sannsynligvis for standardistas som kanskje kryper ved tanken på å bruke ekstra ikke-semantiske div i oppslaget for et stylingsproblem.
Heldigvis inkluderte Nathan Smith også clearfix løsning i 960.gs CSS, først diskutert på PositionIsEverything.net. Det gjør bort med ekstra div, som du kan plassere den ved siden av grid_xx klasser og oppnå samme effekt:
190
750
230
710
Det er det samme eksemplet markering over med de ekstra delene fjernet, og clearfix klasse lagt til. Den vil gjør det samme, så du kan velge denne metoden for å rydde hvis du finner det som du vil. Her er CSS for det:
.clearfix: etter clear: both; innhold: "; display: blokk; skriftstørrelse: 0; linjehøyde: 0; synlighet: skjult; bredde: 0; høyde: 0; / * Følgende zoom: 1 regel er spesifikt for IE6 + IE7. separate stilark hvis ugyldig CSS er et problem. * / * html .clearfix, *: første barn + html .clearfix zoom: 1;Koden kan være litt annerledes enn hva du er vant til. Dette skyldes at Nathan Smith baserte den på en bloggoppføring av Jeff Star, som tilsynelatende oppdaterer den opprinnelige clearfix-hack, for å fjerne koden for en nettleser som nå er utdøpt (dvs. IE for Mac-er), og tweaks for nyere (dvs. IE6 og IE7).
Konklusjon
Ved å bruke bare 24-kolonne demo på 960.gs (og i noen tilfeller, selve 960.gs-siden) har jeg vist deg hvordan hver av sine klasser fungerer, og hvordan du kan bruke dem til å konvertere dine 960-baserte design til HTML og CSS.
Hvert avsnitt i demoen gir lærdom å lære, og når du ser hva klassene gjør til oppslaget ditt ved å undersøke CSS, forsvinner mysteriet til 960.gs, og du får en bedre forståelse av hva som skjer bak kulissene. Du kan til og med finne nye måter å bruke klassene på, siden du nå vet hva de gjør.
Bruk av nyfødte kunnskaper blir lett, fordi når du har satt inn kolonnene dine ved hjelp av 960.gs, må du bare tildele divisjonene til divsene (som situasjonen krever) som kroker for å justere divs-paddingene eller størrelsene på dens tekst inni.
