Designa med rutsystem och 960

Swiss Poster

Swiss Poster

Det engelska ordet grid används av många även på ”webb-svenska”. Fenomenet grid har dock funnits länge inom formgivning och arkitektur och på svenska heter det oftast rutnät eller rutsystem. I den här artikeln blandas orden: rutnät, rutsystem, rutor, kolumner och spalter friskt. Men begreppen avser samma sak: grid.

1-2

Rutnät

Vad är då ett rutnät? Ett rutnät byggs upp av kolumner. Kolumnerna är rutnätets minsta enhet. Utöver kolumnerna har rutnätet s.k. rännor (gutter).  I exemplet ovan har kolumnerna givits en röd färg och och rännorna blå.

3-4

Användandet av rutnät fick stor utbredning i samband med att den moderna tyska typografin med rötterna i Bauhaus-rörselsen växte fram efter andra världskriget (denna våg kallas även International Typographic Style eller Swiss Style Movement). Ovan: exempel ur boken Geschwister Scholl Gedenktag. Men principen om att använda raster har alltid funnits. Nedan: Palazzo Rucellai, Florens (disegno della facciata di Leon Battisti Alberti).

5-6

På senare år har bruket av rutsystem blivit mycket vanligt på webben eftersom det erbjuder ett effektivt och bra sätt att omsätta design till HTML/CSS. Nedan ett exempel på drupal.org som använder systemet 960 (ninesixty).

7-8

Själva principen för hur man använder ett rutsystem är att man tilldelar de olika ytorna i layouten ett visst antal kolumner. I exemplet nedan, som är ett rutsystem på 12 kolumner, har är sidhuvudet uppdelat i två kolumner med 8 respektive 4 kolumners bredd. Huvudytan och högerspalten har återigen 8 respektive 4 kolumners bredd och sidfoten 12 kolumners bredd.

9

960 grid system

Den här artikeln beskriver rutsystemet 960.gs (960 grid system) som konstruerats av Nathan Smith för att effektivisera och förenkla arbetsflödet för webbutveckling. 960 är ett ramverk både för snabbt ihopslängda prototyper och för skarp utveckling. En bonus med 960, som är ett av de populäraste rutsystemen är att det finns ett komplett paket med mallar för Fireworks och Photoshop eller utskrivbara PDF:er för att skissa på pappe. Mallarna finns att hämta på http://www.960.gs

Jobbar man med Drupal finns 960 som bastema under namnet Ninesixty. Detta är är en anpassning av 960 för Drupal som tagits fram av Todd Nienkerk på Four Kitchens.

Namnet 960 kommer från rutsystemets bredd vilket är 960 pixlar. Av de 960 pixlarna används 10 på varje sida som marginaler, vilket i praktiken lämnar en satsyta på 940 pixlar att använda.

11
Med 960 skapas layouten genom css-klasserna som ingår. Dessa klasser är .container för att definiera runätet (som automatiskt centreras i webbläsaren) och .grid för att ange bredden på kolumnerna. Dessutom kan div:arna ”nestas” i varandra, dvs om du har en ruta som är 8 kolumner bred kan du lägga två (eller flera) rutor inne i denna så länge summan av rutorn i rutan blir 8. Teoretiskt sätt kan du varva rutor i oändlighet. Det går också bra att göra en ny uppdelning på nästa rad i rutsystemet. I exemplet ovan följs en rad uppdelad i 8 och 4 av en rad uppdelad på 6 och 6. I container-div:en  placeras kolumnerna med .grid-klassen värden. Summan per rad ska motsvara container-div:ens bredd (se illustrationen ovan).

12

Det finns två versioner av rutnätet grundutförandet och det är ett rutnät på 12 repektive 16 kolumner. (Passar detta inte dina behov går det även bra att generara ett skärddarsytt rutnät med valfritt antal kolumner och fritt definierade kolumner, rännor och bredd med verktyget grid-generator på 960.gs.) Antalet kolumner i rutnätet anges antigen .container-12 eller .container-16 som omsluter rutnätet.

I 12-kolumners rutsystemet är varje enhet 60px bred och i 16-kolumners rutsystemet är varje enhet 40px.

.container-12 .grid-1 {
width: 60px;
}

.container-16 .grid-1 {
width: 40px;
}

13

Det gäller att inte gå i tankefällan att exmpelvis grid-4 är 4 gånnger grid-1 eftersom varje ökning av kolumnbredden även innefattar 20px ränna (gutter) mellan rutorna.

.container-12 .grid-1 {
width: 60px;
}

.container-12 .grid-2 {
width: 140px; /* 60+20+60=140 */
}

.container-12 .grid-3 {
width: 220px; /* 60+20+60+20+60=220 */
}

14

Det går även att kombinera 12- och 16-kolumners layouter med varandra genom att byta container mitt i layouten.

<div class="container-12">
<div class="grid-4"></div><div class="grid-4"></div><div class="grid-4"></div>

   <!-- // summan av grid-klasser blir 12 -->
</div>

<div class="container-16">
<div class="grid-6"></div><div class="grid-6"></div><div class="grid-4"></div>

   <!-- // summan av grid-klasser blir 16 -->
</div>

12- och 16-kolumnerslayouterna överlappar varandra matematiskt med halvor och fjärdedelar.

Ett enkelt exempel

Så här kan alltså en grundläggande enkel 960-layout se ut:

15

och koden

<div class="container-12">
<div class="grid-3">Vänsterspalt
</div>
   <div class="grid-6">Mittspalt</div>
   <div class="grid-3">Högerspalt</div>
</div>

För att skapa tomma ytor mellan rutor använder man .prefix och .suffix och lägger till motsvarande det antal kolumner att prefix eller suffix ska gälla. Prefix lägger till utrymme för en grid-ruta och suffix lägger till tomt utrymmer efter en grid-ruta.

16
<div class="container-12">
   <div class="grid-3">Vänsterspalt</div>
   <div class="grid-4 prefix-1 suffix-1">Mittspalt</div>
   <div class="grid-3">Högerspalt</div>
</div>

Så här kan det se ut om du lägger till flera rader:

<div class="container-12">
<div class="grid-12">Sidhuvud</div>
<div class="grid-3">Vänsterspalt</div>
   <div class="grid-4 prefix-1 suffix-1">Mittspalt</div>
   <div class="grid-3">Högerspalt</div>
</div>

Man behöver inte ha en ny container för att skapa en ny rad.

Alfa och omega

Vill man nesta divar (varva dem i varandra) går det utmärkt. Men eftersom varje grid-ruta alltid har 10px marginal vänster och höger är det nödvändigt att få bort dessa, för att inte spränga layouten. I 12-kolumnerslayouten är t ex en grid-6 460px bred plus marginaler om 10px på varje sida. En grid-3 i 12-kolumnerslayouten är 220px bred med 10px marginal på varje sida. Det innebär att grid-3 rutan upptar 240 px när marginalerna räknas med. Lägger man därför två 3:or i en 6:a får man 2  gånger 240px vilket blir 280px. Det är 20 pixlar för mycket och layouten går sönder. Det är för att förhindra detta som klasserna .alpha och .omega finns. Alpha-klassen tar bort marginalen (10px) före rutan och omega-klassen marginalen efter rutan.

20

<div class="container-12">
<div class="grid-12">Sidhuvud</div>
<div class="grid-3">Vänsterspalt</div>
   <div class="grid-6">
   <div class="grid-6 alpha omega"></div>
      <div class="grid-3 alpha"></div><div class="grid-3 omega"></div>
   </div>
   <div class="grid-3">Högerspalt</div>
</div>

Push och Pull

Ibland kan man av semantiska skäl och för att vara SEO-vänlig lägga huvudinnehållet på en sida, t ex brödtexten i en artikel (mittspalt), före en lång tråkig meny (vänsterpalt) som upprepas på varje sida på hela webbplatsen. För detta ändamål finn klasserna push och pull som precis som den engelska beteckning antyder trycker fram och drar tillbaka div:en de associeras med. Vill vi i layouten i föregående exempel flytta vänsterpalten så att den hamnar efter mittspalten semantiskt i koden, men lämna den visuella utmatningen i webbläsaren oförändrad, gör man så här:

<div class="container-12">
<div class="grid-12">Sidhuvud</div>

   <div class="grid-6 push-3">
   <div class="grid-6 alpha omega"></div>
      <div class="grid-3 alpha"></div><div class="grid-3 omega"></div>
   </div>
   <div class="grid-3 pull-6">Vänsterspalt</div>
   <div class="grid-3">Högerspalt</div>
</div>

Det innebär alltså att man lägger till siffran för den andra grid-div och parar ihop dem. Vill man som i exemplet dra tillbaka en grid-3 sex steg (den plats som nu fylls av mittspalten / grid-6) anger man pull-6 på grid-3. Och grid-6 som semantiskt ligger först ska skjutas fram 3 steg och får alltså push-3.