Share
960 Grid-systemet har funnits ett tag nu? men det har mest använts på kodningssidan av projekt som en HTML / CSS-ram. Idag ska vi diskutera fördelarna med att använda nätverkssystem som 960GS i början av ett projekt, innan du ens öppnar Photoshop eller Fireworks. Om du inte har använt en ram tidigare, eller om du bara vill ha en bra uppdatering, är det här ett bra ställe att börja!
Chansen är bra att du redan har hört talas om eller använt någon form av CSS-ram redan? men bara i fall, låt oss granska de viktigaste fördelarna med att använda ett CSS-ramverk (aka grid system) i ett webbprojekt:
I slutändan bör ett CSS-ramverk hjälpa till att fastställa några grundläggande riktlinjer för innehållskolumner, samtidigt som designers ger full kontroll över sina mönster.
I den här artikeln: Jag ska förklara vad en CSS-ram är och varför jag valde 960. Sedan ska jag gå över grunderna om hur man applicerar 960-nätet. För att fördjupa vår diskussion, visar jag dig några webbplatser som använder 960-nätet och hur de struktureras.
En CSS Framework är en serie stilark som skapats för att göra en webbutvecklare lättare. De tar hänsyn till de olika egenskaperna hos webbläsare, är enkelt anpassningsbara och tillämpar grundläggande designprinciper (som att skapa visuellt tilltalande marginaler mellan element).
Ofta har dessa ramar också typografiarkiv, som kan fungera som ett bra ställe att börja arbeta med på din webbplats typografi (för mer information om typografi, kolla in den här artikeln).
Det finns två stora CSS-ramar för tillfället: Blueprint och 960. Båda är perfekt skickliga ramar, med bra funktioner och användarvänlighet. Det kommer helt enkelt ner till en fråga om vilken ram som du tycker är mest bekväm att använda.
Innan du börjar projektfasen av ett projekt är det viktigt att diskutera valet av ramverk med den person som ska koda webbplatsen. Ofta kommer utvecklare att ha preferenser mot en viss CSS-ram och som en av de främsta orsakerna vi använder ramar under designfasen är att släta över övergången från design till kodning är det ett viktigt beslut. Om du själv kodar projektet, var noga med att du är bekväm med gridramen du väljer - det är inget värre än att designa en hel webbplats baserat på en ram som du slutar ogillar.
Personligen fann jag 960 Grid passar mina behov bättre, så det är vad jag har antagit och det är vad vi ska diskutera i den här artikeln. De övergripande principerna som vi diskuterar kommer emellertid att gälla för alla ramar, inklusive Blueprint.
960.gs bygger på att lägga alla delar av din webbplats i en 960px bred (smart flicka) behållare och dela den i 12, 16 eller 24 lika stora kolumner. De ger ett verktyg för att använda alternativa bredder, men 960 är vad hela systemet är utvecklat för och det råkar se ganska skarpt ut.
Varför 960px? Eftersom 960px är en bredd som passar för det stora antalet plattformar som vi surfar på webben. Det möjliggör väsentligen en 1024px bred bildskärm för att visa webbplatsen noggrant och utan horisontell rullning, med hänsyn till bredden på webbläsarens krom, rullbalkar och lite vaddering för läsbarhet. Det finns alltid en 10px-marginal placerad till höger och vänster om huvudinnehållskolumnen, vilket innebär att mindre webbläsare alltid kan läsa längst till vänster innehåll utan att texten stöter men mot webbläsarfönstret.
Dessutom är alla tal i 960GS heltal baserat på det gyllene förhållandet - det finns inga decimaler eller problem med funky spacing. Om du har läst vår artikel om matematik och webbdesign vet du hur viktigt det är att få dessa nummer rätt.
En av de brutna utelämnandena, eller trevliga funktioner, beroende på hur du ser på det, är hur 960 hanterar (eller inte) typografi. Det finns en text.css-fil som ingår, men det här är främst för att säkerställa att det finns åtminstone något på plats, så att du som snabb prototyping har vanliga element som rubriker, stycken och listor grundläggande styling.
Jag kommer inte att gå in på för mycket djup här, men låt oss kortfattat diskutera de viktigaste skillnaderna mellan 960.gs och Blueprint. Först är Blueprint ett CSS-ramverk som är baserat på 950px - det är väldigt lik 960 på det sättet att det hanterar de grundläggande layoutmaterialen (BP använder 24 kolumner med liknande tillvägagångssätt för vaddering och förhållanden)? men det är där Blueprint slutar att vara liknande.
Blueprint är ett mycket mer komplext, robust och omfattande ramverk. Det har byggts som ett fullsträckt stilark för nästan allt element som du kan tänka dig (radioknappar, tabeller, etc.). Det finns saker jag tycker om Blueprint, den mest anmärkningsvärda är dess styling för formelement och inbyggd i anmälningskurser. Dessutom innehåller den en komplett serie stilar för:
Problemet jag hade med Blueprint är att det bara är för komplicerat att använda i designfasen? Att skapa en design från grunden innebär att omformatera allt som de tillhandahåller, och det är ofta svårt att hålla fast vid den fullständiga omfattning som BP tillhandahåller. I motsats till detta erbjuder 960.gs bara en layout - perfekt för att låta en designer bli kreativ inom realistiska gränser.
960-nätet är nästan skrämmande lätt att använda (i själva verket kan du börja fråga dig själv: "Varför brukade jag inte använda det tidigare?"), Med bara några enkla regler måste du följa.
När du har laddat ner det, ta en titt in i katalogen du bara unzipped. Jag vill uppmärksamma dig på två mappar: "sketch_sheets" och "mallar". Skärmarken innehåller en PDF-fil för de olika rutnätstorlekarna i ett i ett webbläsarfönster, och mappen "mall" innehåller mallar för nästan alla grafikprogram under solen (till exempel GIMP, Fireworks och Photoshop).
Syftet med en CSS-ram är att göra ditt liv enklare, och du bör alltid leta efter sätt att hjälpa dig att minska tiden som krävs för att skapa en design. Använd dessa mallar när du skapar en design i Photoshop, skriv ut kopior av skissarken när du diskuterar detaljerna i ett projekt med en klient (och se till att titta på detta innan du går!).
Faktum är att jag föreslår att du använder dessa skissplåtar varje gång du startar ett projekt: de låter dig experimentera fritt innan du låser dig ned till en layout. Det tar bara 5 minuter att skissa för att inse att en design kommer eller inte fungerar, i motsats till 50 minuter + om du hade designat och kodat det.
När du väl har kommit till ett grundläggande avtal om det skisserade konceptet för webbplatsen är det dags att spricka öppna mallfilerna. Detta är förmodligen den centrala anledningen till att jag gillar att använda 960-systemet? Den kommer förpackad med mallar för nästan alla program du kan tänka dig. Jag råkar använda Photoshop, så här är en skärmdump av den angivna mallen:
Den viktigaste fördelen här är enkel: Mallen har förkonstruerade guider för alla huvudinnehållskolumner som direkt motsvarar CSS-ramverket på kodningssidan av saker. Det är lätt att snabbt rita huvudkolumnerna och hålla allt i din design ren och organiserad.
Erfaren designers kan se detta som "design med träningshjul på", men uppriktigt sagt, det är inget fel att ha ett enkelt överlagringssystem för att hjälpa till att styra ramen för en webbdesign.
Du måste fortfarande designa allt på webbplatsen (naturligtvis!), Men genom att hålla din design i linje med guiderna, kommer det att göra utvecklingssidan av saker mycket enklare. Som en tilläggsförmåga är det ett bra sätt att få din design att bli mer professionell och ha en enhetlig inställning till vaddering mellan innehållsceller. Läs mer om varför "Pixel Perfect Comps" här.
Nu när du har fått en design nailed ner, är det dags att vi pratar om 960-nätets syntax. Som jag nämnde vid introet kan du hitta mycket mer information om hur du använder och prototyper med CSS-ramar på Nettuts, så jag kommer bara att täcka grunderna här.
Först måste du referera till lämpliga CSS-filer i din design: reset.css (återställningsfilen som tar hänsyn till webbläsarens egenskaper), text.css (det inbyggda typografiarkivet), och 960.css (eller 960_24_col.css om du använder ett 24 kolumner). Vanligtvis lägger jag all min webbplatsspecifika styling i en separat fil (vanligtvis kallad style.css) för att se till att jag inte bryter något i ramverket.
Snabbtips: Referera till ditt eget stilark efter att du har refererat till ramverket, så att du kan anpassa specifika aspekter av ramen utan att ändra ramverket själv (och om du gör ett misstag behöver du inte ladda ner och skriva över rammens filer igen). Med dessa 4 filer är du nu redo att börja utforma din webbplats.
Här är en snabb översikt över syntaxen som dras från 960.gs-webbplatsen:
????
Den första div är din behållare, vad ditt innehåll kommer att lagras i. Genom att definiera det är klassen "container_12" säger du: "Jag vill att den här behållaren ska ha ett 12 kolonnät" (Samma övning gäller vid användning av 16 och 24 kolonnnät).
Nu när du har definierat behållaren som en 12 kolumnlayout börjar du strukturera din webbplats så att den passar inuti layouten. Om du tittar på nästa div-element i hierarkin (som noteras av flikarna) ser du syntaxen för deras definitioner. "Grid_7" och "grid_3" är lätta att förstå: du säger att detta div-element kommer att ta upp X antal kolumner. Dock 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!
Nu vet jag att du undrar Div-elementen som är inbädda i "Grid_7" div. Tja, du kan nestle divs som tar upp ett visst antal kolumner i en annan div, så länge det inte överstiger storleken på dess modernät. Vidare måste de första och sista elementen ha "alfa" och "omega" bifogad respektive klassdefinition. Så, i vår provkod: "grid_2 alpha" är den första div nested inom "grid_7", nästa element "grid_3" är i mitten (och behöver därför inte en "alfa" eller "omega" bifogad) och slutligen "grid_2_ omega" är den sista div nested inom "grid_7". Och sedan 2 + 3 + 2 = 7 är definitionen korrekt.
För att illustrera hela processen, låt oss gå igenom ett snabbt exempel på att använda 960 Framework under designfasen av ett personligt projekt av mig.
Designen är ganska enkel, men det är det perfekta sättet att visa hur ramverket kan fungera som ett verktyg genom designprocessen.
Cerberus webbplats: det exempel vi ska använda Mass Effect 2 är ett av mina favoritspel de senaste 5 åren, och jag kände att skapa en webbplats för den fiktiva organisationen "Cerberus" skulle vara en utmaning. Organisationens huvudaspekter är: professionalism och teknisk förmåga, som jag ville förmedla med en ren design som använde hela sitt färgschema. Till att börja med skissade jag ut designen för webbplatsen (det skulle vara hyfsat för mig att agera annars, eller hur?).
När jag såg designskissen såg jag hur man gjorde designarbetet i 960-nätet. Nedan finns HTML-skelettet för min webbplats:
LogotypCerberus: Styrka för mänskligheten
NavigeringInnehållSidebarSidebarSidebarsidfot
Om du märkte, hade jag logotypen bara täckt av 2 kolumner, medan underrubriken tog upp alla 12 utrymmen. Eftersom rubriken var 12 kolumner lång, kan alla delelement upp till 12 kolumner långa. Det här tricket gjorde det möjligt för mig att göra rubriken, eftersom logotypen tog upp 2 kolumner och lämnade resten tomt (bilden är faktiskt bakgrundsbilden för huvuddivisionen). Och eftersom underrubriken var 12 kolumner breda fyllde den hela bredden under logotypen (eftersom den inte kunde passa hela innehållet inom de 10 utrymmena kvar efter logotypen).
Detta är faktiskt en viktig skillnad att göra, och är ett annat designverktyg som du bör använda (och för att vara säker kan du använda "prefix" eller "suffix" för att säkerställa att en viss mängd utrymme är reserverat). Resten av platsen är ganska snitt och torr: 8 kolumner för huvudinnehållet och 4 för sidofältet. Varje sidobarelement är ett separat div-element; de staplar på toppen av varandra eftersom de är begränsade till bredden av 4 kolonner.
För att illustrera hur webbplatsen är upprättad har jag tagit en skärmdump av webbplatsen och tydligt märkt kolumnerna:
Nu är mitt eget exempel kanske inte det bästa sättet att verkligen inspirera dig att gå ut och skapa några mördare webbdesigners, så här är bara några exempel på 960-systemet i aktion. Du hittar mer på 960.gs webbplats.
En av de mest tilltalande aspekterna av en CSS Framework är den bekvämlighet som de erbjuder till designers. Men som alla andra verktyg måste du se till att du använder det på ett relevant och värdefullt sätt. Försök inte använda den om den inte passar designen och låt den inte begränsa din kreativitet. För de flesta projekt (speciellt för komplexa tidningar eller blogginspirerade layouter) kan en CSS-ram vara ett bra tidsbesparande verktyg, inte bara för att spöka ut snabb HTML / CSS, men för hela designprocessen.
Vill du läsa mer om kodning med CSS-ramar? Kolla in nätets bibliotek med artiklar om ämnet (bläddra till botten för mer avancerade tuttar).
Accentsconagua