Så använder du 960 Grid System
960gridsystem

Alla skärmar har en viss upplösning på skärmen, denna beror på hur bra skärmen är, och hur små du personlingen vill att alla saker ska vara. Om du skapar en hemsida för en upplösning på säg 1600*1200 px (1600 px bred och 1200 px hög) och en användare med en upplösning på 1024*768 px trillar in på sidan, så måste person scrolla i sidled för att kunna se allt du skrivit. Detta är oftast så jobbigt att man väljer att lämna hemsida, vilket är det sämsta möjliga resultat du kan tänka dig.

Alla skärmar i dagsläget stödjer minst 1024*768 px, så ifall man bygger en hemsida bör man bygga den med dessa mått i åtanke.

Eftersom det sedan finns många standardmått på hur breda olika rutor bör vara har 960 Grid System skapats för att underlätta ditt programmerande då du ändå gör om samma sak om och om igen. Med hjälp av 960 GS kan du snabbt och enkelt skapa komplicerade magasin liknande hemsidor utan att oroa dig för hur du ska sätta ”float” på dina element för att få dem på rätt plats.

960 GS är ett css framework som bygger på att du har en hemsida med bredden 960 px. Den skapar sedan 12 eller 16 kolumner åt dig med 10 px marginal på vardera sida (alltså 20 px mellan varje kolumn) vilket resulterar i att varje kolumn får en bredd på 60 px respektive 40 px. När du sedan skapar ett element behöver du bara tala om hur många av dessa kolumner du vill att elementet ska innehålla. Ta en titt på demo sidan för att få ett bättre grepp om saken, och fortsätt att referera till denna sida till en början.

Okej jag vet att det låter krångligt, men låt oss göra lite exempel så ska vi se att det är ganska lätt.

Setup:

Det första vi måste göra att att gå in på 960 GS hemsida och ladda ner deras Framework. När det är gjort behöver du ladda upp filerna till din hemsida. Men det är inte så många av filerna vi behöver;
sketch_sheets innehåller en pdf som man kan skriva ut och kladda på. (behöver vi inte)
licenses och readme filen kan vi också kasta efter att ha läst dem.
Templates är bra att ha då den innehåller startsidor för olika bildbehandlingsprogram så att du kan designa din hemsida med hjälplinjer redan utritade.
Code är den mapp vi verkligen vill ha och specifikt det som finns i css mappen. Du kan antingen ladda upp de tre css filerna som ligger där, eller ta de okomprimerade ifall du inte bryr dig om storleken.

Jag placerade css filerna i en mapp jag döpte till 960 och placerade denna på samma plats där jag har min index fil.

I index filen måste vi sedan referera till filerna vi precis laddade upp, så mellan head taggarna skriver vi:

1
2
3
<link rel="stylesheet" href="/960/reset.css" type="text/css" />
<link rel="stylesheet" href="/960/text.css" type="text/css" />
<link rel="stylesheet" href="/960/960.css" type="text/css" />

Reset.css inehåller kod för att ta bort så mycket förinställda värden som möjligt i css koden. Om du har din egen reset fil kan du strunta i denna. Text.css är en fil för att återge lite värden till olika element och skapa en standard på hemsidan. Har du din egen text fil kan du strunta i denna också.
960.css är den filen där all magi skapas. Det är där alla definitioner på bredden på de olika klasserna är.

Så nu när vi har refererat till css filerna är det bara att börja.

The Magic:

Låt oss säga att vi vill ha en hemsida med en huvudkolumn högst upp, en ”header”. Sedan vill vi ha tre kolumner. En stor och två mindre. Och under alltsammans vill vi återigen ha en stor kolumn, en footer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <div class="container_12"> <!-- Det första vi måste göra är att definiera en conteiner som talar om ifall vi använder oss av 12 eller 16 kolumner -->
        <div id="header" class="grid_12"> <!-- Vår header ska sträcka sig över alla 12 kolumner -->
            <h1>En hemsida som använder 960 GS</h1>
        </div>
        <div id="main" class="grid_6"> <!-- Main elementet i mitten skall inehålla 6 av de 12 kolumnerna -->
            <p>Här kommer massa text som skall finnas i mitten</p>
        </div>
        <div id="sidebar1" class="grid_3"> <!-- Nästa element på samma rad använder de tre nästa kolumnerna -->
            <p>Första sidebaren</p>
        </div>
        <div id="sidebar2" class="grid_3"> <!-- Det sista elementet använder sig av de sista tre kolumnerna (6+3+3 = 12) -->
            <p>En sidebar till höger</p>
        </div>
        <div id="footer" class="grid_12"> <!-- Footern ska sträcka sig över alla 12 kolumner -->
            <p>Skapad av BeforeYouDie.se</p>
        </div>
    </div> <!-- Avsluta conteinern -->
</body>

Ok allt är färdigt. Vi behöver inte göra någonting mer än så. Genom att specificera de där klasserna så har 960.css gjort allting åt oss.

Låt oss säga att vi vill ha ytterligare 3 element inuti ”main” som vardera ska ta upp 2 kolumner (main använder 6 kolumner, så barnen måste ha en summa av 6, 2+2+2 = 6). Då är det lika enkelt gjort som det vi precis gjorde. Det ända vi behöver komma ihåg är att ifall vi har element inuti ett annat element måste det första element ha klassen ”alpha” och det sista elementet ha klassen ”omega”.

1
2
3
4
5
6
7
8
9
10
11
<div id="main" class="grid_6"> <!-- Main från tidigare  -->
    <div id="child1" class="grid_2 alpha"> <!-- Första barnet med klassen alpha -->
        <p>Det första barnet</p>
    </div>
    <div id="child2" class="grid_2"> <!-- Mellan bocken bruse -->
        <p>Barn nummer två</p>
    </div>
    <div id="child3" class="grid_2 omega"> <!-- Sista barnet med klassen omega -->
        <p>Och det sista barnet</p>
    </div>
</div> <!-- Avsluta main -->

Avslutning:

960 Grid System Screenshot

Då var allting klart. Så enklast kan man sätta upp en komplicerad hemsida med 960 Grid System. Jag byggde ihopp hemsida precis som ovan och placerade den här. Jag la in lite genererad text från lipsum.com för att få lite mer i den. Och satte lite bakgrunds färger så att man enkelt ska kunna se elementen.

Glöm inte bort att läsa källkoden till demo sidan när ni bygger för att komma ihåg hur man skriver. All lycka.


3 kommentarer till 'Så använder du 960 Grid System' »»

Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>