Sjansene er gode for at du allerede har hørt om eller brukt noen form for CSS rammeverk allerede ... men bare i tilfelle, la oss gå gjennom den viktigste fordelene ved å bruke en CSS rammeverk (aka grid system) i alle nett prosjekt:.

Gir en "ramme" som er designet for å se bra ut på alle skjermer

Strømlinjedesignprosessen . ved å definere eksakte målinger

Reduserer utviklingstiden ved å gi pre-kodet HTML /CSS

I en perfekt verden, det hjelper designere og utviklere å kommunisere bedre -. glatter ut prosessen med å flytte fra Design å Coding

Til syvende og sist, bør en CSS rammeverk bidra til å etablere noen grunnleggende retningslinjer for innhold kolonner, samtidig som designere med full kontroll over sine design

I denne artikkelen:.. Jeg m kommer til å forklare hva en CSS rammeverk er, og hvorfor jeg valgte 960. Deretter vil jeg gå over det grunnleggende om hvordan å bruke 960 Grid. Å bryte opp vår diskusjon, vil jeg vise deg noen nettsteder som bruker 960 nettet, og hvordan de er strukturert

En CSS Framework er en serie av stilark opprettet for å gjøre en webutvikler livet enklere. De står for de ulike quirks av nettlesere, kan enkelt tilpasses, og anvende grunnleggende design prinsipper (for eksempel etablering av visuelt tiltalende marginer mellom elementer).

Ofte er disse rammene har også typografi stilark, som kan fungere som et flott sted å begynne å jobbe på stedets typografi (for mer informasjon om Typografi, sjekk ut denne artikkelen).

Det er to store CSS Frameworks i øyeblikket: Blueprint og 960. Begge er fullt i stand rammer, med flotte funksjoner og brukervennlighet. Det kommer rett og slett ned til et spørsmål om preferanser for hvilke ramme du føler deg mest komfortabel med å bruke.

Før du begynner designfasen av et prosjekt, er det viktig å diskutere valg av et rammeverk med den personen som kommer til å kode nettstedet. Ofte vil utviklere har preferanser mot en bestemt CSS rammeverk, og som en av de viktigste grunnene til at vi bruker rammer under designfasen er å jevne ut overgangen fra design til koding, det er en stor avgjørelse. Hvis du koder prosjektet selv, bare sørg for at du er komfortabel med rutenettet rammeverket du plukker -. Det er ingenting verre enn å designe et helt nettsted basert på et rammeverk som du ender opp med å mislike

Personlig fant jeg den 960 Grid passer mine behov bedre, så det er det jeg har vedtatt og det er det vi skal diskutere i denne artikkelen. Imidlertid vil de overordnede prinsippene som vi skal diskutere gjelde alle rammeverk, inkludert Blueprint.

960.gs er basert rundt å sette alle stedets elementer i et 960 x bred (flink jente) container, og dele på at beholderen til 12, 16 eller 24 like store kolonner. De gir et verktøy å bruke alternative bredder, men 960 er det hele systemet er utviklet for, og det skjer for å se pen skarpe.
CSS Generator på 960GS

Hvorfor 960 x? Fordi 960 x er en bredde som er egnet for det brede rekke plattformer som vi surfer på nettet. Det tillater egentlig for en 1024px bred skjerm for å vise nettstedet nøyaktig og uten horisontal rulling, sto for bredden av nettleseren Chrome, scrollbars, og litt polstring for lesbarhet. Det er alltid en 10px margin plassert på høyre og venstre side av hovedinnholdet kolonnen, noe som betyr at mindre nettlesere vil alltid være i stand til å lese lengst venstre innhold uten teksten stangar men mot nettleservinduet.

I tillegg alle tallene i 960GS er hele tall basert på det gylne snitt - det er ingen desimaler eller funky avstandsproblemer. Hvis du har lest vår artikkel om matematikk og Web Design, vet du hvor viktig å få disse tallene rett er.

En av de grelle utelatelser, eller fine funksjoner, avhengig av hvordan du ser på det, er måten de 960 håndtakene (eller ikke gjør) typografi. Det er en text.css fil inkludert, men dette er først og fremst å sikre at det er minst en noe på plass, slik at når du gjør rask prototyping, felles elementer som overskrifter, avsnitt og lister har grunnleggende styling.

Hvordan er Blueprint annerledes?

Jeg vil ikke gå i for mye dybde her, men la oss kort diskutere de viktigste forskjellene mellom 960.gs og Blueprint. Først er Blueprint en CSS rammeverk som er basert på 950px - det er svært lik 960 i måten den håndterer de grunnleggende layout ting (BP bruker 24 kolonner med liknende tilnærminger til padding og forholdstall) ... men det er der Blueprint slutter å være lik .
Blueprint tillater for form spesifikk styling og varslinger, noe jeg skulle ønske 960 ville gjennomføre.

Blueprint er en mye mer kompleks, robust og helhetlig ramme system. Det er blitt bygget som en fullverdig stilark for ganske mye hver element som du kan tenke på (radioknapper, tabeller, etc.). Det er ting jeg liker om Blueprint, den mest bemerkelsesverdige er dens styling for skjemaelementer og bygget i varslingsklasser. I tillegg inneholder den en full pakke med stiler for:

Typografi - BP gir typografi størrelse og avstand standarder for alle elementer

Form Element Styling - styling for skjemaer og noen klasser som. kan brukes til å legge til skjemaer (som må utfylles)

Print Stil -. Print stilark for når surfere treffer utskriftsknappen

UI for Plugins -. Pre-bygget CSS (og noen ganger bilder ) for knapper, faner, og sprites.

Problemet som jeg hadde med Blueprint er at det er litt for komplisert å bruke i designfasen ... skape et motiv fra grunnen av gjør re-formatering alt som de gir, og det er ofte vanskelig å holde tritt med den rene helhet at BP gir. I kontrast 960.gs tilbud bare en layout - perfekt for å la en designer kreativ innenfor realistiske grenser

960 Grid er nesten skremmende lett å. bruke (faktisk, kan du begynne å spørre deg selv: «Hvorfor ble ikke jeg bruker dette tidligere?"), med bare noen få enkle regler du må følge

Last ned den 960 Grid fra 960.. gs

Etter at du laster den ned, ta en titt inne i katalogen du nettopp pakket ut. Jeg ønsker å trekke oppmerksomheten til to mapper: "sketch_sheets" og "maler". Den "skisse ark" -mappen inneholder en PDF av de ulike grid størrelser i en innenfor et nettleservindu, og "mal" -mappen inneholder maler for nesten alle grafikkprogram under solen (som GIMP, fyrverkeri, og Photoshop).

Tegne Ark: Å gjøre livet ditt enklere ...

Formålet med en CSS Framework er å gjøre livet ditt enklere, og du bør alltid være på utkikk etter måter å hjelpe deg å redusere tiden det tar å lage et design. Bruk disse malene når du oppretter en design i Photoshop, skrive ut kopier av "skisse ark" når man diskuterer detaljene i et prosjekt med en klient (og sørg for å se på dette før du går!).
Eksempel på en trykt ut Sketch Sheet ... med noen skisser på det

Faktisk vil jeg foreslå å bruke disse skisse ark hver gang du starter et prosjekt. de vil tillate deg å eksperimentere fritt før du låser deg ned til noen layout. Det vil bare ta deg 5 minutter å skissere for å realisere et design vil eller ikke vil fungere, i motsetning til 50 minutter + hvis du hadde vært å designe og koding det.

---

Designing Med 960 Maler

Når du har kommet til en grunnleggende enighet om skisserte konsept for området, er det på tide å knekke åpen malfilene. Dette er trolig den sentrale grunnen til at jeg liker å bruke den 960-systemet ... det kommer pre-pakket med maler for omtrent alle program du kan tenke på. Jeg tilfeldigvis bruke Photoshop, så her er et skjermbilde av den medfølgende malen:

Hovedfordelen her er enkel: Malen har forhånds bygget guider for alle de viktigste innholds søylene som direkte svarer til CSS rammeverk på kodingen siden av ting. Det er lett å raskt trekke hovedinnholdet kolonner og holde alt i design ryddig og organisert.

Erfarne designere kan se dette som "design med opplæring hjul på", men ærlig talt, det er ingenting galt med å ha et enkelt overlegg system for å hjelpe rammene for et webdesign.

Du har fortsatt å designe alt på stedet (selvfølgelig!), men ved å holde ditt design i tråd med føringene, vil det gjøre utviklingen siden av ting mye enklere. Som så ekstra fordel, å ha en helhetlig tilnærming til polstring mellom innholds celler er en fin måte å gjøre din design ser mer profesjonell. Les mer om hvorfor "Pixel Perfect Comps" her.

---

Sette It Up

Nå som du har fått et design spikret, det er på tide vi snakker om 960 grid syntaks. Som jeg nevnte i intro, kan du finne mye mer informasjon om bruk og prototyping med CSS rammeverk på Nettuts, så jeg skal bare dekke grunnleggende her.

Først må du referere de aktuelle CSS filer til din design: reset.css (reset-fil som står for leser quirks), text.css (den innebygde typografi stilark), og 960.css (eller 960_24_col.css hvis du bruker en 24 kolonner grid). Vanligvis, jeg legger all min stedsspesifikk styling i en egen fil (vanligvis kalt style.css), for å sikre at jeg ikke ødelegge noe i ramme

Quick Tips:. Referanse ditt eget stilark etter at du har referere til Work, slik at du kan justere bestemte aspekter av rammen uten å endre ramme selv (og hvis du gjør en feil, trenger du ikke å laste ned på nytt og overskrive ramme filer). Med disse 4 filer, er du nå klar til å begynne å designe ditt nettsted.

Her er en rask oversikt over syntaks, trukket fra 960.gs site:

< div class = "container_12" > < div class = "grid_7 prefix_1" > < div class = "grid_2 alpha" > ... ≪ /div > < div class = "grid_3" > ... ≪ /div > < div class = "grid_2 omega" > ... ≪ /div > < /div > < div class = "grid_3 suffix_1" > ... ≪ /div > < /div >.

Den første div er beholderen din, hva innholdet vil bli lagret i Ved å definere det er klassen som "container_12", du sier .: "Jeg vil ha denne beholderen for å ha et rutenett 12 Kolonnen" (Samme praksis gjelder når et rutenett 16 og 24 kolonne bruker)

Nå som du har definert beholderen en layout 12 kolonne som begynner du å strukturere nettstedet ditt på en slik måte at det passer inn i oppsettet. Hvis du ser på de neste div-elementer i hierarkiet (som nevnt av faner), vil du se syntaksen for sine definisjoner. "Grid_7" og "grid_3" er lett nok å forstå: du sier at dette div element kommer til å ta opp X antall kolonner. Men 7 + 3 = 10 < 12, som betyr at du vil ha 2 tomme kolonner på slutten av beholderen, ikke sant? Vel, dette er hvor prefikset og suffikset aspektet av klassen definisjonen kommer inn i bildet. Med en klasse definisjon av "grid_x suffix_y", du sier: "Jeg vil at dette div å ta opp X kolonner, og for at det skal være Y antall tomme kolonner etter det." (Dette gjelder også for prefiks). Så, siden "Grid_7" har et prefiks av en, og "Grid_3" har et suffiks på 1, 7 + 3 + 1 + 1 = 12!

Nå, jeg vet du lurer på om Div elementer nestet i "Grid_7" div. Vel, du kan Nestle divs som tar opp et spesifisert antall kolonner i en annen div, så lenge den ikke overstiger størrelsen på moder rutenettet. Videre må de første og siste elementene har "alfa" og "omega" er lagt til klassen sin definisjon, henholdsvis. Så, i vår eksempelkode: "grid_2 alpha" er den første div nestet innenfor "grid_7", den neste element "grid_3" er i midten (og derfor ikke trenger en "alpha" eller "omega" er lagt til det), og til slutt "grid_2_ omega" er den siste div nestet innenfor "grid_7". Og siden 2 + 3 + 2 = 7, er definisjonen riktig

---

Putting It All Together.: A Short Eksempel

For å illustrere dette hele prosessen, la oss gå gjennom en rask eksempel på bruk av 960 Work under designfasen av et personlig prosjekt av meg.

design selv er ganske enkel, men det er den perfekte måten å vise deg hvordan rammeverket kan fungere som et verktøy gjennom designprosessen.
Cerberus Nettsted: The Example at vi skal bruke

Mass Effect 2 er et av mine favorittspill fra de siste 5 årene, og jeg følte meg lage et nettsted for den fiktive organisasjonen "Cerberus" ville være en utfordring. De viktigste sider ved organisasjonen er: profesjonalitet og teknologiske prowess, som jeg ønsket å formidle med en ren design som brukte hele sin fargevalg. For å starte, skisserte jeg ut design for området (det ville være hyklersk for meg å opptre ellers, ikke sant?).
Da jeg kikket design skisse, så jeg hvordan å lage design arbeid i 960 Grid. < p> Nedenfor er HTML skjelettet til mitt eget nettsted:
< div id = "container" class = "container_12" > < div id = "header" class = "grid_12" > < div id = "logo" class = "grid_2 alpha" > Logo < /div > < div id = "undertittel" class = "grid_12 omega" > < div id = "tagline" class = "grid_4 alpha" > < h1 > Cerberus: Styrketrening for Humanity < /h1 > < /div > < div class = "grid_8 omega" > Navigation < /div > < /div > < /div > < div id = "innhold" class = "grid_8" > Content < /div > < div id = "sidebar" class = "grid_4" > < div class = "sidebarSection" > Sidebar < /div > < div class = "sidebarSection" > Sidebar < /div > < div class = "sidebarSection" > Sidebar < /div > < /div > < div id = "footer" class = "grid_12" > Footer < /div > < /div >

Hvis du lagt merke til, hadde jeg logoen bare dekke 2 kolonner, mens sub header tok opp alle 12 plasser . Siden header div var 12 kolonner lang, eventuelle underelementer kan opp til 12 kolonner lange. Dette trikset tillatt meg å lage header, som ble logoen tok opp 2 kolonner, og lot resten ligge tom (bildet er faktisk bakgrunnsbildet for header div). Og siden sub header var 12 kolonner bred, det fylt opp hele bredden under logoen (siden det ikke kunne passe alt innholdet inni de 10 plasser igjen etter logoen).

Dette er faktisk en viktig skille å gjøre, og er en annen design verktøy du bør bruke (og for å være sikker, kan du bruke "prefikset" eller "suffiks" for å sikre en viss plass er reservert). Resten av området er ganske cut-and-tørr: 8 kolonner for hovedinnholdet og 4 for sidepanelet. Hver sidebar element er en egen div element; de stable oppå hverandre fordi de er begrenset til bredden av 4 kolonner

For å illustrere hvordan området er satt opp, jeg har tatt en skjermdump av området og tydelig merket kolonnene.

---

Eksempler på The 960 Grid in Action

Nå, mitt eget eksempel kanskje ikke den beste måten å virkelig inspirere deg til å gå ut og lage noen drapsmann webdesignere, så her er bare en få eksempler på den 960-systemet i aksjon. Du kan finne mer på 960.gs nettstedet.
Keynote Rammeverk Toolkit nettstedet, som bruker suffikset aspektet ved 960, sammen med et bakgrunnsbilde via CSS for å liste opp kompatible programmer.
5by5 podcasting nettverket bruker 960 Grid å justere sine nyeste episodene på en tiltalende måte
Med 960 Grid Work.; Hugh Griffith var i stand til å presentere en smart bullet-punkts liste over seg selv, og en mer detaljert forklaring av hans ekspertise side-by-side. Videre bruker han den nedre halvdelen av hans nettsted for å presentere de 3 mest attraktive delene av sin portefølje (hver er 4 kolonner bred).

---

Lukke Merknader

En av de mest tiltalende sidene ved en CSS Framework er fordelene de tilbyr til designere. Men som alle andre verktøy, må du sørge for at du bruker den i en relevant og verdig måte. Ikke prøv å bruke den hvis det ikke passer design, og ikke la det begrense kreativiteten. For de fleste prosjekter (spesielt de som er for komplekse avis eller blogg-inspirert oppsett), kan en CSS rammeverk være en stor tidsbesparende verktøy, ikke bare for å spytte ut raskt HTML /CSS, men for hele designprosessen.

Vil du lese mer om koding med CSS rammer? Sjekk ut Nettuts bibliotek av artikler om emnet (bla til bunnen for mer avanserte tuts). Anmeldelser

Previous:Design og utvikle en komplett nettside (A Tuts + Mini Series, Pt 1)

Next Page:Design en varm, munter Website Interface i Adobe Photoshop