Innhold
- 01. Nettstedets allestedsnærværende
- 02. Hva vi trenger fra et rutenett
- 03. Komme i gang
- 04. Gjør det responsivt
- 05. Vent. Dette er ikke semantisk
- 06. Neste trinn
- Likte dette? Les disse!
- Kunnskap som trengs: Mellomliggende CSS, mellomliggende HTML
- Krever: Kodeditor, nettleser
- Prosjekt Tid: 1 time
- Støttefil
Å bygge nettsteder er ærlig talt kjempebra. Vi får lage rike, dynamiske opplevelser som blir sett av hundrevis, tusenvis, millioner av mennesker over hele verden. Vi får leke med nye leker, jobbe med alle de beste selskapene og geek ut uten å komme over som nerdene (du vet at det er sant). Det er de gode greiene.
Det dårlige (ok, det utfordrende) er at vi må kjempe med flere og flere typer nettlesere og enheter, og bygge mer og mer komplekse og fullverdige nettsteder enn vi noen gang har gjort. Derfor trenger vi nettsystemer. De hjelper oss med å bygge ting raskere og bedre, og med tanke på fremtiden for bransjen vår. La oss se på hva et moderne nettsystem trenger, og deretter bygge det.
01. Nettstedets allestedsnærværende
Rutenettene er ikke nye. Det er konservativt flere titalls perfekt levedyktige nettsystemer som allerede er der for å hjelpe deg med å få ting gjort. Det er ting som 960.gs, Blueprint, Bootstrap, 320 and Up, Golden Grid, semantic.gs ... etc ... etc, ad nauseam. Hver bringer noe til bordet, hver etterlater noen ting å være ønsket.
Grunnen til at nettene er så populære er at de fungerer. Når du oppretter et oppsett for nettet, vil ni av ti ganger et rimelig fleksibelt rutenett-system få oppsettet ditt 90 prosent av veien dit og spare deg for timer med tilpasset koding. Det er legitime bekymringer for at nettsystemer begrenser vår tenkning, og begrenser oss til ting vi burde unngå, men med litt disiplin og en solid designprosess kan vi unnvike det.
02. Hva vi trenger fra et rutenett
Hva ser vi etter i et nettsystem? Det vi skal se på her er ikke en løsning på alle problemer, men det er en fremtidsrettet (og ganske kul) måte å angripe problemet på.
Her er hva vi trenger fra nettet vårt:
- Vi trenger fleksibilitet for virkelige verdensoppsett. Vi må ha nok kolonner i en konfigurasjon som lar oss dekke de fleste av våre mulige layoutkrav. Det betyr noe som kan deles i mange grupper uten å bli for detaljert. For våre formål i dag bruker vi 12. Dette lar oss enkelt dele siden opp i halvdeler, tredjedeler og kvartaler.
- Vi trenger å kunne hekke rutenettet. Et enkelt kolonnivå gir oss en del av veien dit, men å ha noe du kan hekke ned til N-nivåer gir deg utrolig fleksibilitet.
- Vi trenger nettet for å være lydhør. Dette kan virke som om det kommer ut av venstre felt, men stol på meg, det er et krav. Det er bokstavelig talt hundrevis av forskjellige enheter nettstedet ditt trenger å støtte, og antallet øker bare. 960 rutenett er dødt, og god avveie. Rutenettet vårt skal være flytende (prosentvis basert) og konfigurert til å skalere ned på mindre enheter.
- Vi trenger at rutenettet kan endres. En av de største klagene du får se fra brukere av et responsivt rutenett, er vanskeligheten med å endre ting som takrenne. Å beregne prosentandeler på nytt basert på en endring på 4,4% til 3,6% takrenner er ikke en morsom måte å tilbringe en time. Vi skal imøtekomme dette ved å bruke en relativt lite brukt CSS-egenskap som vi vil diskutere litt om. Det er ganske kult.
- Vi trenger at rutenettet skal være bakoverkompatibelt. Til et punkt. Hele verden bruker ikke Chrome eller iOS5 Mobile Safari. Når det er sagt, vil målet vårt i dag være støtte for Android, iOS 4+, Webkit-nettlesere, Firefox og IE8 +.
03. Komme i gang
For å komme i gang trenger vi en tom CSS-fil kalt grid.css. Vi bruker denne filen til rutenettet vårt, slik at den kan slippes i ethvert prosjekt. Som en sidemerknad vil nettet vi bygger i dag være nøyaktig (eller veldig nær) nettet som ble brukt i Foundation 3 (for øyeblikket 2.2.1).
La oss først sette opp syntaksen for rutenettet (det er veldig enkelt). I utgangspunktet lager vi rader som inneholder kolonner. Vi bruker disse ordene for å holde dette mennesket lesbart.
.row {}
.kolonne, .kolonner {}
.row .one {}
.row .two {}
.row .three {}
.row .four {}
.row .five {}
.row .six {}
.row .seven {}
.row .eight {}
.row .nine {}
.row .ten {}
.row .eleven {}
.row .twelve {}
Med disse tomme erklæringene kan du se hvordan syntaksen vår vil se ut i HTML. For å lage en rad med tre like store kolonner, vil vi gjøre dette:
div>
div>
...
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>
Hver av disse kolonnene kan nå inneholde hvilket vilkårlig innhold vi ønsker. Nå må vi ha disse kolonnene og radene som fungerer. Legg til disse egenskapene til .rad og .kolonne, .kolonner erklæringer:
.row {bredde: 1000px; maks bredde: 100%; min bredde: 768px; margin: 0 auto; }
.kolonne, .kolonner {flyte: venstre; min høyde: 1px; polstring: 0 15px; posisjon: relativ; }
Ok, la oss forklare hva som skjer her:
- Radbredde: På radelementet har vi satt raden til å være 1000 px bred (vår basesidebredde). Vi har imidlertid også sagt at maksbredden er 100%, noe som betyr at når nettleseren skalerer ned (for eksempel på en iPad eller iPhone), kan ikke raden overskride vinduets bredde. Min bredde vil sikre at radene ikke blir komisk små i IE8, som ikke støtter mediespørsmål.
- Radmargin: Ved å sette margin: 0 auto har vi sentrert radene våre på siden.
- Kolonneplassering: Kolonnene våre er alle flytende til venstre, akkurat nå, slik at de stabler opp mot hverandre.
- Kolonne min høyde: Egenskapen min-høyde sørger for at tom kolonne fremdeles påvirker flyteordren.
- Kolonnestopp: Denne polstringsegenskapen er faktisk vår søylerenne. Ved å sette den til 15 px legger vi 15 px til venstre og høyre for hver kolonne, og lager 30 px takrenner mellom kolonnene.
Dette er åpenbart bare en del av det vi trenger for at nettet vårt skal fungere. Åpenbart må vi erklære bredden på kolonnene våre. Siden vi har et 12 kolonnegitter, er disse breddene antall kolonner bredt delt inn i 12, i prosent på 100. For eksempel: 6/12 = 0,5, 50%. Våre bredder ser slik ut:
.row .one {bredde: 8,33%}
.row .two {bredde: 16,66%}
.row .three {bredde: 25%}
.row .four {bredde: 33,33%}
.row .five {bredde: 41,66%}
.row .six {bredde: 50%}
.row .seven {bredde: 58,33%}
.row .eight {bredde: 66,66%}
.row .nine {bredde: 75%}
.row .ten {bredde: 83,33%}
.row .eleven {bredde: 91,66%}
.row .twelve {bredde: 100%}
Våre kolonner har alle bredder som representerer størrelsen definert av kolonnetallet. Det du kanskje tenker er: "Hvis vi lager kolonner som bare er basert på deres inndeling av 100, vil ikke polstringen vi legger på dem gjøre dem bredere og skru opp rutenettet vårt?" Normalt, ja. La oss se på en kritisk del av dette som vi ikke har ennå, og det er en enkel erklæring du vil gjøre for hvert element på siden:
* {border-box; boksstørrelse: border-box; }
Denne lille eiendommen gjør noe både fantastisk og ironisk for oss. Det som står er at elementene på siden ikke skal legge til polstring og grenser til bredden på et objekt, men bør betrakte dem som en del av bredden.Dermed vil et objekt med 50% bredde og ingen polstring være den samme bredden som en med 50% bredde og 15px innvendig polstring. Ganske kult, ikke sant?
Ja. Det er kult. Det er også IE6-boksmodellen. Ironisk, ikke sant? All denne tiden, og alt dette crapping på IE6 (og med rette) og til slutt håndterte IE6 faktisk boksmodellen på en mye mer sunn måte enn noen påfølgende nettleser. Takk W3C for den. Uten denne CSS-egenskapen, eller uten IE6-boksmodellen, er det umulig å lage et objekt som er 50% bredt, men med 15 piks polstring. (Merk: ikke helt sant. Men støtte for calc () i CSS er i utgangspunktet ikke eksisterende akkurat nå.)
Nå, for å få dette til å fungere, trenger vi også noen forhandleregenskaper (iOS 4 støtter det ikke uten -webkit, og Firefox trenger -moz). Hele erklæringen ser slik ut:
* {-moz-box-størrelse: border-box; -webkit-box-størrelse: border-box; boksstørrelse: border-box; }
Hvis du vil dykke lenger inn på border-box, skrev Paul Irish et flott innlegg om fordelene ved å bruke border-box på alt.
La oss oppsummere før vi dykker ned i noen av de grittere bitene. Nettverket vårt, akkurat nå, skal se slik ut:
* {-moz-box-størrelse: border-box; -webkit-box-størrelse: border-box; boksstørrelse: border-box; }
.row {bredde: 1000px; maks bredde: 100%; min bredde: 768px; margin: 0 auto; }
.kolonne, .kolonner {flyte: venstre; min høyde: 1px; polstring: 0 15px; posisjon: relativ; }
.row .one {bredde: 8,33%}
.row .two {bredde: 16,66%}
.row .three {bredde: 25%}
.row .four {bredde: 33,33%}
.row .five {bredde: 41,66%}
.row .six {bredde: 50%}
.row .seven {bredde: 58,33%}
.row .eight {bredde: 66,66%}
.row .nine {bredde: 75%}
.row .ten {bredde: 83,33%}
.row .eleven {bredde: 91,66%}
.row .twelve {bredde: 100%}
Gjør fremgang, men det kommer ikke til å fungere ennå. Først og fremst, la oss konfigurere rutenettet vårt for å støtte hekking. Siden vi bruker prosenter, er dette død enkelt. Enhver nestet rad vil ha noen spesifikke overstyringer, og ellers vil bare ... fungere. Legg til denne linjen etter .rad erklæring:
.row .row {bredde: auto; maks bredde: ingen; min bredde: 0; margin: 0 -15px; }
Det eneste vanskelige som skjer her er at vi setter en negativ venstre og høyre margin på raden. Vi gjør dette fordi containerraden har polstring, og det gjør de nestede kolonnene også - men vi vil ikke doble opp på den polstringen, eller de nestede radene våre vil alle være innrykket. Den negative marginen og bredden: auto betyr at raden vil utvides til kantene på containerraden, utenfor polstringen i den inneholder kolonnen.
Bemerkelsesverdig er det alt vi trenger for å støtte hekkingen. Vi kan nå ha syntaks i HTML-en som ser slik ut:
div>
div>
div>
div>
...
/ div>
div>
...
/ div>
/ div>
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>
Den enkle endringen åpner for et stort utvalg av layoutalternativer for oss. Dessverre er rutenettet vårt fortsatt brutt som et helvete uten noen flere endringer. La oss deretter sørge for at radene våre faktisk stables riktig til tross for at de bare inneholder flytende elementer (som normalt vil bety at raden ikke har noen høyde). Vi ønsker ikke å bruke overflow: skjult på .rad, bare i tilfelle vi trenger ting som bokseskygger for å komme ut. Bruk i stedet dette:
/ * Nicolas Gallaghers micro clearfix * /
.row: før, .row: etter, .clearfix: før, .clearfix: etter {content: ""; display: tabell; }
.row: etter, .clearfix: etter {clear: begge deler; }
.row, .clearfix {zoom: 1; }
Som du kan se, rekvisitter til Nicolas Gallagher for denne kodebiten. Dette sikrer at radene våre får en reell høyde, og at radene stablet på hverandre ikke overlapper kolonnene eller gjør noe annet uheldig. Det er avhengig av oppførselen til tabellvisning, så vel som innhold: etter å gi noe som rydder ut flyten vår for hver rad.
Med dette på plass fungerer nettet vårt faktisk. Vi kan opprette rader og kolonner og fylle dem med vilkårlig innhold - til og med andre rader. En siste ting, en finhet som hjelper nettet vårt til å se veldig søtt ut. Plasser disse linjene rett etter .kolonne, .kolonner erklæring:
[class * = "column"] + [class * = "column"]: siste barn {float: right; }
[class * = "column"] + [class * = "column"]. slutt {float: left; }
Hvis du ikke har brukt velgere som dette før, kan dette se absurd ut. La oss bryte det ned:
- [klasse * = ”kolonne”] - Dette er en lite sett velger som retter seg mot verdien av et HTML-attributt. I dette tilfellet attributtet "klasse". I utgangspunktet ethvert HTML-element med en klasse som inneholder "Kolonne" vil bli matchet her. Du må være veldig forsiktig med denne typen velger, fordi de også samsvarer med en klasse med "sidefelt-kolonne" eller "sidefelt".
- [klasse * = ”kolonne”] + [klasse * = ”kolonne”] - Denne søskenvelgeren betyr at vi bare vil målrette mot kolonner som kommer etter en annen kolonne. Dette hjelper oss i utgangspunktet å utelate enkeltkolonner, for eksempel en enkelt sentrert kolonne eller en tolv kolonneblokk.
- [klasse * = ”kolonne”] + [klasse * = ”kolonne”]: siste barn - Til slutt betyr dette at vi bare vil ha siste kolonne som kommer etter en annen kolonne. Ellers får vi hver kolonne unntatt den første på rad.
- flyte: høyre - Dette hjelper oss med å løse et problem med prosentvise bredder: nettlesere avrunder dem ikke på samme måte. Uten dette vil du legge merke til at rader ikke alltid ender helt på samme sted. Hvis en bredde på 66,66% betyr 666,6 piksler, vil noen nettlesere legge den verdien hver gang (bare 666 piksler, Chrome), noen vil bytte gulv og tak slik at den ene blir rundet opp, den neste ned osv. (Firefox) og noen vil jevn gulvet prosentandelen først. Å flyte den siste kolonnen til høyre betyr at mens takrennen kan være en piksel eller to større, vil høyre kant alltid være den samme.
- [klasse * = ”kolonne”] + [klasse * = ”kolonne”]. slutt - Du vil kanskje ikke at den siste kolonnen skal gå riktig hver gang. Hvis du oppretter en rad med bare to .four.column blokker med bevisst tom plass til høyre, kan du legge til en klasse .end for å sikre at den ikke flyter over. Dette er vanligvis mindre sannsynlig, derfor er det den du må velge.
Whew! Det er en tung forklaring på et par linjer, men de er kule CSS-velgere og verdt en liten sammenbrudd. Og nå er vi ferdige (for øyeblikket). La oss oppsummere igjen. Slik ser rutenettet vårt ut:
* {-moz-box-størrelse: border-box; -webkit-box-størrelse: border-box; boksstørrelse: border-box; }
.row {bredde: 1000px; maks bredde: 100%; min bredde: 768px; margin: 0 auto; }
.row .row {bredde: auto; maks bredde: ingen; min bredde: 0; margin: 0 -15px; }
.kolonne, .kolonner {flyte: venstre; min høyde: 1px; polstring: 0 15px; posisjon: relativ; }
[class * = "column"] + [class * = "column"]: siste barn {float: right; }
[class * = "column"] + [class * = "column"]. slutt {float: left; }
.row .one {bredde: 8,33%}
.row .two {bredde: 16,66%}
.row .three {bredde: 25%}
.row .four {bredde: 33,33%}
.row .five {bredde: 41,66%}
.row .six {bredde: 50%}
.row .seven {bredde: 58,33%}
.row .eight {bredde: 66,66%}
.row .nine {bredde: 75%}
.row .ten {bredde: 83,33%}
.row .eleven {bredde: 91,66%}
.row .twelve {bredde: 100%}
/ * Nicolas Gallaghers micro clearfix * /
.row: før, .row: etter, .clearfix: før, .clearfix: etter {content: ""; display: tabell; }
.row: etter, .clearfix: etter {clear: begge deler; }
.row, .clearfix {zoom: 1; }
Oppfyller dette kriteriene våre for et moderne nett? La oss sjekke:
- Fleksibilitet: Yup, vi har nok kolonner og hekker for å få jobben gjort.
- Hekkende: Sjekk, se ovenfor.
- Mottakelig: Ikke ennå. Hmmm. La oss gjøre det.
04. Gjør det responsivt
For denne opplæringen skal vi se på minimumsnivået for å gjøre dette responsivt: linearisere rutenettet på små enheter og lage hver kolonnestak på toppen av den forrige. Vi bruker et CSS3-mediespørsmål for dette, som støttes i alle våre mål unntatt IE8:
@media bare skjerm og (maks bredde: 767px) {
...
}
Vi vil matche spørsmålet vårt om små enhetsmedier til mindre enn en iPad (som rapporterer bredden til 768 piksler, i alle retninger, på vanlige skjermer eller netthinnedisplayer). Inne i dette mediespørsmålet må vi gjøre noe overordnet:
.row {bredde: auto; min bredde: 0; margin-venstre: 0; margin-høyre: 0; }
.kolonne, .kolonner {bredde: auto! viktig; flyte: ingen; }
.kolonne: siste barn, .kolonner: siste barn {flyte: ingen; }
[class * = "column"] + [class * = "column"]: siste barn {float: none; }
.kolonne: før, .kolonner: før, .kolonne: etter, .kolonner: etter {innhold: ""; display: tabell; }
.kolonne: etter, .kolonner: etter {klar: begge deler; }
Det er ikke mye her vi trenger å forklare for mye detaljer: Vi forteller i utgangspunktet nettleseren at på en liten skjerm ikke flyter kolonnene, ikke gir dem min bredde, ikke gir dem marginer . Vi er avhengige av samme polstring som ovenfor for å skape et gap mellom innholdet og kanten av skjermen, og vi fjerner flottøren på hver kolonne når vi går for godt mål. Det stabler rutenettet vårt, og vårt% -baserte design tar seg av resten for oss.
Ok, nå har vi det på sjekklisten:
- Fleksibilitet: Fortsatt bra.
- Hekkende: Rock ‘n roll.
- Mottakelig: Jepp. Det er mer vi kan gjøre (og i Foundation 3-rutenettet, på Github, gjør vi det), men dette gjør jobben gjort for nå.
- Endringsbar: Ja, lett. Ved å endre polstringen på kolonnene, og de negative marginene på radene, kan vi endre takrennestørrelsen med to verdier. Hvis vi vil ha et rutenett med 24 kolonner, er det enkel matematikk å dele 1, 2, 3 i 24 i stedet for tolv. Søt.
- Bakoverkompatibel: Ja. boksstørrelse fungerer faktisk så langt tilbake som IE8 (go figure). Det er en atferdsfil du kan bruke til å aktivere boksstørrelsesegenskapen i IE7, men den har noen alvorlige problemer med automatiske bredder. Forhåpentligvis vil det løses snart - hvis det er, er nettet vårt klart til å gå i IE7.
Og det er jenga. Gå frem og lag søte oppsett.
05. Vent. Dette er ikke semantisk
Ja, det er det ikke. Du har oss. Her er tingen: du kan opprette et semantisk (rent separasjon av data og skjerm) rutenett, som semantic.gs, men det krever en forprosessor som Sass. Utover behovet for et annet verktøy (og egentlig, Sass og verktøy som det er ganske kult) er utgangen CSS av et semantisk rutenett, helt ærlig, sinnssyk. Du ender opp med enten kommaavgrensede velgere som går langt utover muligheten til å lese og modifisere dem, eller med egenskaper som gjentas igjen og igjen og om og om igjen. Semantisk er virkelig fantastisk, og i fremtiden vil dette begynne å bli viktig, men vi er ikke der nå. Å bygge et bedre nettsted for kunder betyr å bygge raskt og itere, og du kan bygge raskere ved ikke å bekymre deg for dette (for mye).
06. Neste trinn
Et robust, komplett rutenettsystem trenger ting som forskyvninger, kildebestilling, N-objektnett som et tre-opp blokkeringsnett og mer. Du kan sjekke ut den fullstendige versjonen av dette rutenettet (og se det utvikle seg etter behov) på Github. Siden Foundation er åpen kildekode, kan du leke med dette rutenettet, sjekke ut det fulle, og deretter hjelpe oss med å gjøre det enda bedre. Bransjen vår utvikler seg hver dag, og verktøyene bør også.
Jonathan har vært en stor nerd så lenge han kan huske, helt tilbake til å spille det gamle online labyrint-spillet på Prodigy til en karriere innen digital mediedesign. Han jobbet i finansielle tjenester i Alabama en liten stund før han kom ut til vestkysten for ZURB: www.zurb.com
Likte dette? Les disse!
- Hvordan lage en app
- Gratis programvare for grafisk design tilgjengelig for deg akkurat nå!
- Strålende Wordpress opplæringsvalg
- Våre favorittfonter - og de koster ikke en krone
