Share
960 Grid-systemet har eksistert en stund nå? men det er mest brukt på kodende siden av prosjekter som et HTML / CSS-rammeverk. I dag skal vi diskutere fordelene ved å bruke nettverkssystemer som 960GS ved starten av et prosjekt, før du åpner opp Photoshop eller Fireworks. Hvis du ikke har brukt et rammeverk før, eller du bare vil ha en god forfriskning, er dette et flott sted å starte!
Sjansene er gode at du allerede har hørt om eller brukt en slags CSS-rammeverk allerede? men bare i tilfelle, la oss se på de viktigste fordelene ved å bruke et CSS-rammeverk (aka grid system) i et hvilket som helst webprosjekt:
Til slutt bør et CSS-rammeverk bidra til å etablere noen grunnleggende retningslinjer for innholdskolonner, samtidig som designere får full kontroll over deres design.
I denne artikkelen: Jeg skal forklare hva et CSS-rammeverk er, og hvorfor jeg valgte 960. Så skal jeg gå over det grunnleggende om hvordan jeg skal bruke 960-nettverket. For å pakke opp diskusjonen, viser jeg deg noen nettsteder som bruker 960-nettet, og hvordan de er strukturert.
Et CSS Framework er en serie stilark som er opprettet for å gjøre livet til en webutvikler enklere. De står for de ulike kjennskapene til nettlesere, er lett tilpassbare og bruker grunnleggende designprinsipper (for eksempel å etablere visuelt tiltalende marginer mellom elementer).
Ofte har disse rammene også typografi stilark, som kan fungere som et flott sted å begynne å jobbe med nettstedets typografi (for mer informasjon om typografi, sjekk ut denne artikkelen).
Det er to store CSS-rammer for øyeblikket: Blueprint og 960. Begge er perfekt standardudrammer, med flotte funksjoner og brukervennlighet. Det kommer ganske enkelt til et spørsmål om hvilken ramme du føler deg mest komfortabel med.
Før du begynner designfasen av et prosjekt, er det viktig å diskutere valg av rammeverk med den personen som skal kode på nettstedet. Ofte vil utviklere ha preferanser mot et bestemt CSS-rammeverk, og som en av hovedgrunnene til at vi bruker rammebetingelser under designfasen, er å jevne ut overgangen fra design til koding, det er en stor beslutning. Hvis du selv koder prosjektet, må du bare sørge for at du er komfortabel med gridrammen du velger - det er ingenting verre enn å designe et helt nettsted basert på et rammeverk som du ender med å misliker.
Personlig fant jeg 960-nettverket mine behov bedre, så det er det jeg har vedtatt, og det er det vi skal diskutere i denne artikkelen. De overordnede prinsippene som vi skal diskutere vil imidlertid gjelde for ethvert rammeverk, inkludert Blueprint.
960.gs er basert på å plassere alle elementene i nettstedet ditt i en 960px bred (smart pike) beholder, og dele denne beholderen i 12, 16 eller 24 like store kolonner. De gir et verktøy for å bruke alternative bredder, men 960 er hva hele systemet er utviklet for, og det ser ut til å se ganske skarpt ut.
Hvorfor 960px? Fordi 960px er en bredde som passer for det store antallet plattformer som vi surfer på nettet. Det gir i det vesentlige en 1024px bred skjerm for å vise nettstedet nøyaktig og uten horisontal rulling, regner for bredden på nettleserkromen, rullestenger og litt polstring for lesbarhet. Det er alltid en 10px-marginal plassert til høyre og venstre for hovedinnholds-kolonnen, noe som betyr at mindre nettlesere alltid vil kunne lese lengst venstre innhold uten at teksten støter, men mot nettleservinduet.
I tillegg er alle tall i 960GS hele tall basert på det gylne forholdet - det er ingen desimalpoeng eller problemfri avstandsproblemer. Hvis du har lest vår artikkel om matematikk og webdesign, vet du hvor viktig å få disse tallene riktig.
En av de skarpe utelatelsene, eller fine funksjoner, avhengig av hvordan du ser på det, er måten 960 håndterer (eller ikke) typografi. Det er en tekst.css-fil inkludert, men dette er hovedsakelig for å sikre at det er minst noe på plass, slik at du som vanlig gjør prototyping, vanlige elementer som overskrifter, avsnitt og lister har grunnleggende styling.
Jeg vil ikke gå for mye inn her, men la oss kort diskutere de viktigste forskjellene mellom 960.gs og Blueprint. Først er Blueprint et CSS-rammeverk som er basert på 950px - det ligner på 960 på den måten at det håndterer de grunnleggende layoutspillene (BP bruker 24 kolonner med lignende tilnærminger til utfylling og forhold)? men det er der Blueprint slutter å være lik.
Blueprint er et mye mer komplekst, robust og omfattende rammesystem. Den er bygget som et fullverdig stilark for stort sett hvert element du kan tenke på (radioknapper, tabeller, etc.). Det er ting jeg liker om Blueprint, det mest bemerkelsesverdige er dets styling for formelementer og bygget i varslingsklasser. I tillegg inneholder den en komplett serie med stiler for:
Problemet jeg hadde med Blueprint er at det bare er for komplisert å bruke i designfasen? Å skape et design fra bunnen betyr at du formaterer alt de gir, og det er ofte vanskelig å holde tritt med den rene forståelsen som BP gir. I motsetning 960.gs tilbyr bare en layout - perfekt for å la en designer bli kreativ innenfor realistiske grenser.
960-nettet er nesten skremmende lett å bruke (faktisk kan du begynne å spørre deg selv: "Hvorfor brukte jeg ikke dette tidligere?"), Med bare noen få enkle regler du må overholde.
Etter at du har lastet ned det, ta en titt inne i katalogen du bare unzipped. Jeg vil trekke oppmerksomheten din på to mapper: "sketch_sheets" og "maler". Mappen "skisseark" inneholder en PDF-fil av de ulike gridstørrelsene i et i et nettleservindu, og "mal" -mappen inneholder maler for nesten alle grafikkprogrammer under solen (for eksempel GIMP, Fireworks og Photoshop).
Formålet med et CSS Framework er å gjøre livet ditt lettere, og du bør alltid være på utkikk etter måter å hjelpe deg med å redusere tiden det tar å lage et design. Bruk disse maler når du lager et design i Photoshop, skriv ut kopier av "skissebladene" når du diskuterer detaljene i et prosjekt med en klient (og sørg for å se på dette før du går!).
Faktisk vil jeg foreslå å bruke disse skissebladene hver gang du starter et prosjekt: de vil tillate deg å eksperimentere fritt før du låser deg ned til et hvilket som helst layout. Det vil bare ta deg 5 minutters skisse å innse at et design vil eller ikke vil fungere, i motsetning til 50 minutter + hvis du hadde designet og kodet det.
Når du har kommet til en grunnleggende avtale om det skisserte konseptet for nettstedet, er det på tide å knekke opp malfilene. Dette er trolig den sentrale grunnen til at jeg liker å bruke 960-systemet? den kommer ferdigpakket med maler for omtrent alle programmer du kan tenke på. Jeg tilfeldigvis bruker Photoshop, så her er et skjermbilde av den angitte malingen:
Hovedfordelen her er enkel: Malen har forhåndsbygde guider for alle hovedinnholdskolonnene som direkte samsvarer med CSS-rammene på kodingssiden av tingene. Det er enkelt å tegne hovedkolonnene dine og holde alt i designet ditt rent og organisert.
Erfarne designere kan se dette som "design med treningshjul på", men ærlig talt er det ingenting galt med å ha et enkelt overleggssystem for å veilede rammen for et webdesign.
Du må fortsatt designe alt på nettstedet (selvfølgelig!), Men ved å holde designen i tråd med støttelinjene, vil det gjøre utviklingssiden av tingene mye lettere. Som en ekstra fordel, er det en fin måte å få designet til å være mer profesjonelt å ha en uniform tilnærming til polstring mellom innholdsceller. Les mer om hvorfor "Pixel Perfect Comps" her.
Nå som du har fått et design spikret ned, er det på tide å snakke om 960-grid-syntaksen. Som jeg nevnte ved intro, kan du finne mye mer informasjon om bruk og prototyping med CSS-rammer på Nettuts, så jeg skal bare dekke det grunnleggende her.
Først må du referere til de aktuelle CSS-filene i designet ditt: reset.css (tilbakestillingsfilen som står for nettleseregenskaper), text.css (det innebygde typografi stilarket), og 960.css (eller 960_24_col.css hvis du bruker et 24 kolonnerett). Vanligvis plasserer jeg hele min nettspesifikke styling i en egen fil (vanligvis kalt style.css) for å sikre at jeg ikke bryter noe i rammen.
Raskt tips: Henvis til ditt eget stilark etter at du har referert til rammen, slik at du kan justere bestemte aspekter av rammen uten å endre rammen selv (og hvis du gjør en feil, trenger du ikke å laste ned og overskrive rammens filer igjen). Med disse 4 filene er du nå klar til å begynne å designe nettstedet ditt.
Her er en rask oversikt over syntaksen, trukket fra 960.gs-siden:
????
Den første diven er din container, hva innholdet ditt vil bli lagret i. Ved å definere det er klassen som "container_12", sier du: "Jeg vil at denne beholderen skal ha et 12 kolonne rutenett" (Den samme øvelsen gjelder når du bruker en 16 og 24 kolonne grid).
Nå som du har definert beholderen som en 12 kolonneoppsett, begynner du å strukturere nettstedet ditt slik at det passer inn i oppsettet. Hvis du ser på de neste div-elementene i hierarkiet (som angitt av kategoriene), ser du syntaksen for deres definisjoner. "Grid_7" og "grid_3" er lett nok til å forstå: du sier at dette div-elementet skal ta opp X antall kolonner. Imidlertid 7 + 3 = 10 < 12, which means you'll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of "grid_x suffix_y", you're saying: "I want this div to take up X columns, and for there to be Y number of empty columns after it." (This also applies to prefix). So, since "Grid_7" has a prefix of 1, and "Grid_3" has a suffix of 1, 7+3+1+1 = 12!
Nå vet jeg at du lurer på Div-elementene som er nestet i "Grid_7" div. Vel, du kan nestle divs som tar opp et spesifisert antall kolonner i en annen div, så lenge det ikke overskrider størrelsen på det overordnede gridet. Videre må de første og siste elementene ha "alpha" og "omega" vedlagt henholdsvis sin klassdefinisjon. Så i vår prøvekode: "grid_2 alpha" er den første div nestet innenfor "grid_7", det neste elementet "grid_3" er i midten (og trenger derfor ikke en "alpha" eller "omega" vedlagt den) og til slutt "grid_2_ omega" er den siste div nestet innenfor "grid_7". Og siden 2 + 3 + 2 = 7 er definisjonen riktig.
For å illustrere hele prosessen, la oss gå gjennom et raskt eksempel på å bruke 960-rammen under designfasen av et personlig prosjekt av meg.
Utformingen selv er ganske enkel, men det er den perfekte måten å vise deg hvordan rammen kan fungere som et verktøy gjennom designprosessen.
Cerberus Nettsted: Eksempelet som vi skal bruke Mass Effect 2 er en av mine favorittspill de siste 5 årene, og jeg følte meg å skape et nettsted for den fiktive organisasjonen "Cerberus" ville være en utfordring. De viktigste aspektene i organisasjonen er: profesjonalitet og teknologisk dyktighet, som jeg ønsket å formidle med et rent design som brukte hele fargevalg. For å begynne skisserte jeg designen til nettstedet (det ville være hyklerisk for meg å handle ellers, ikke sant?).
Som jeg så på designskissen, så jeg hvordan man gjorde designarbeidet i 960-gridet. Nedenfor er HTML-skjelettet for nettstedet mitt:
logoCerberus: Styrke for menneskeheten
NavigasjonInnholdsidebarsidebarsidebarbunntekst
Hvis du la merke til, hadde jeg logoen kun dekket 2 kolonner, mens underhodet tok opp alle 12 mellomrom. Siden overskriften div var 12 kolonner lange, kan noen delelementer opptil 12 kolonner lange. Dette trikset fikk meg til å lage overskriften, da logoet tok opp to kolonner, og la resten være tomt (bildet er faktisk bakgrunnsbildet for topptekst-diven). Og siden underoverskriften var 12 kolonner bredt, fylte den hele bredden under logoen (siden den ikke kunne passe hele innholdet i de 10 mellomromene som var igjen etter logoen).
Dette er faktisk et viktig skille å gjøre, og er et annet designverktøy du bør bruke (og for å være trygg, kan du bruke "prefix" eller "suffiks" for å sikre at en viss plass er reservert). Resten av nettstedet er ganske kutt-og-tørt: 8 kolonner for hovedinnholdet og 4 for sidebjelken. Hvert sidebarelement er et separat div-element; de stabler på toppen av hverandre fordi de er begrenset til bredden på 4 kolonner.
For å illustrere hvordan nettstedet er satt opp, har jeg tatt et skjermbilde av nettstedet og tydelig merket kolonnene:
Nå er mitt eget eksempel kanskje ikke den beste måten å virkelig inspirere deg til å gå ut og lage noen dræbte webdesignere, så her er bare noen få eksempler på 960-systemet i bruk. Du finner flere på 960.gs-siden.
En av de mest tiltalende aspektene ved en CSS Framework er den bekvemmeligheten de tilbyr til designere. Men som alle andre verktøy, må du sørge for at du bruker den på en relevant og verdifull måte. Ikke prøv å bruke den hvis den ikke passer til designet, og ikke la det begrense din kreativitet. For de fleste prosjekter (spesielt for komplekse aviser eller blogginnspilt layouter) kan et CSS-rammeverk være et godt tidsbesparende verktøy, ikke bare for å spytte ut hurtig HTML / CSS, men for hele designprosessen.
Vil du lese mer om koding med CSS-rammer? Sjekk Nettets bibliotek med artikler om emnet (bla til bunnen for mer avanserte nøtter).
Accentsconagua