A brief presentation in Swedish of the Ninesixty Drupal base theme

1. Drupalträff i Malmö 24 feb
2011
Världshistoriens första.
Awesome
som man säger i staterna

2. Leander
Lindahl
designer | Popolo
leander@popolo.se

3. Språkförbistring?
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. I den här
presentationen blandas orden: rutnät, rutor,
kolumner och spalter friskt. Och de avser
samma sak: grid

4. Vad är ett rutnät
(grid)?
byggs upp av
kolumner
kolumnerna är
rutnätets minsta
enhet

5. Rännor (gutter)
mellanrummet mellan
rutorna/kolumnerna

6. Några exempel
Modern tysk typografi med rötterna i
Bauhaus-rörselsen (även International
Typographic Style eller Swiss Style
Movement.): Geschwister Scholl Gedenktag

7. Några exempel
Modern tysk typografi med rötterna i
Bauhaus-rörselsen (även International
Typographic Style eller Swiss Style
Movement.): Geschwister Scholl Gedenktag

8. Några exempel
Renässansen: Palazzo Rucellai,
Florens (disegno della facciata di
Leon Battisti Alberti)

9. Några exempel
Renässansen: Palazzo Rucellai,
Florens (disegno della facciata di
Leon Battisti Alberti)

10. Några exempel
Webb: drupal.org

11. Några exempel
Webb: drupal.org

12. Man använder
kolumner för att
disponera ytan
Olika regioner (sidhuvud,
innehåll, högerspalt osv)
bestäms genom
kolumnbredden
T ex: högerspalten är
4 kolumner bred, sidfoten är
12

13. 960.gs |
ninesixty
960.gs (960 grid system)
skapades av Nathan Smith
för att effektivisera och
förenkla arbetsflödet för
webbutveckling
Det är ett ramverk både för
snabbt ihopslängda
prototyper och för skarp
utveckling
Det ingår praktiska mallar
för skissa i Fireworks och
Photoshop. Eller utskrivbara

14. Så funkar det .container-12
Man bygger en sida genom att class: grid-12
använda css-klasserna från
ninesixty (960.gs).
class: grid-4 class: grid-4 class: grid-4
div:arna kan ”nestas” i
varandra
* så länge summan stämmer class: grid-8
class: grid-6 class: grid-6

15. Teknisk spec för 960/
Ninesixty
960 px bredd
940 px användbar yta
2 versioner: 12 spalter eller 16 spalter
12 resp 16 kan användas var för sig eller
tillsammans
Varje spalt har 10 px marginal till vänster
och höger, vilket skapar en ränna (gutter)
på 20 px mellan spalterna.

16. Ninesixty med 12-
Kolumnerna är 60 px breda
960px
60px 60px 60px 60px 60 px 60 px 60 px 60 px 60 px 60 px 60 px 60 px
20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px
10px
10px
940px
marginalerna är 10px på vänster och höger sida rännorna är 20px breda

17. Ninesixty med 16-
Kolumnerna är 40 px breda
960px
40p 40p 40p 40p 40p 40p 40p 40p 40p 40p 40p 40p 40p 40p 40p
40px
x x x x x x x x x x x x x x x
20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px
10px
10px
940px
marginalerna är 10px på vänster och höger sida rännorna är 20px breda

18. Använda båda tillsammans
halvor
fjärdedelar

19. CSS

20. Behållarna
Rutorna/kolumnerna omsluts
.container-12,
av en behållar-div .container-16 {
margin-left: auto;
Behållaren centrerar innehållet margin-right: auto;
och anger vilken version av width:960px;
}
rutnätet som gäller (12 vs 16)

21. Rutorna/
kolumnerna
Kolumnerna (grid:en) har
.grid-1,
float:left och trillar på plats av .grid-2,
sig själv .grid-3,
…
Kolumnerna har dessutom .grid-16 {
display: inline;
10px marginaler vänster och float: left;
höger position: relative;
margin-left: 10px;
margin-right: 10px;
}

22. Kolumnbredden
Kolumnerna bredd avgörs av
.container-12 .grid-1 {
vilken behållare (container) width: 60px;
som den ligger i }
T ex är .grid-1 .container-16 .grid-1 {
width: 40px;
60px bred i .container-12 }
40px bred i .container-16

23. Räkna
Tänk på att kolumnbredden
.container-12 .grid-1 {
ökar inte med 60px eller 40px width: 60px;
varje gång du lägger till en }
kolumn .container-12 .grid-2 {
width: 140px; /* 60+20+60=140 */
Varje ökning måste ta med }
rännan (gutter) på 20px i
.container-12 .grid-3 {
beräkningen width: 220px; /* 60+20+60+20+60=220 */
}

24. Behållaren och
kolumnerna
tillsammans
.container-12
.grid-3 .grid-6 .grid-3

25. Prefix och suffix
Genom att använda
.container-12 .prefix-1 {
klasserna .prefix och .suffix padding-left: 80px;
kan du få tom yta före eller }
efter dina kolumner .container-12 .suffix-1 {
padding-right: 80px;
Prefix ger padding till vänster }
om din kolumn (grid)

26. Lägga till prefix och suffix
.container-12
.grid-3 .grid-4 .grid-3
.prefix-1
.suffix-1

27. Fler rader
.container-12
.grid-12
.grid-3 .grid-4 .grid-3
.prefix-1
.suffix-1

28. Fler rader
<div class=”container-12”>
Container <div> avgör vilken
version som används (12 eller <!-- rad 1 -->
<div class=”grid-12”>
16) Ruta som fyller hela bredden
</div>
Ny rad behöver inte vara i en
egen container <!-- rad 2 -->
<div class=”grid-3”>
Ruta som är 3 enheter bred
</div>
<div class=”grid-4 prefix-1 suffix-1”>
4 bred med prefix och suffix på 1
vardera
</div>
<div class=”grid-3”>
Ruta som är 3 enheter bred
</div>
</div><!-- /container -->

29. Skapa nya rader i
kolumnerna
med ”nestade” divar
.container-12
.grid-12
.grid-6
.grid-6
.grid-3 .grid-3
.grid-6

30. .container-12
.grid-12
.grid-6
.grid-6
.grid-3 10px margin-
right och 10px
margin-left bryter
layouten och puttar
ner nästa ruta en
.grid-6 rad
.grid-3
Att nesta divar bryter layouten eftersom varje .grid-klass har 10 px
marginal höger och vänster. Raden blir bredare än rutnätet tillåter.

31. Våra kompisar
alpha och omega!
Med klasserna .alpha
och .omega kan man ta bort
en rutas marginaler

32. Våra kompisar
alpha och omega!
.container-12
.grid-12
.grid-6
.grid-6 .alpha .omega .grid-3
.grid-3
.grid-3 .alpha .grid-3 .omega

33. Använda ninesixty
Ladda ner från
http://drupal.org/project/ninesixty name = myTheme
placera i sites/all/themes description = A blank base theme using the
960 Grid System.
screenshot = images/screenshot.png
lägg till base theme = core = 7.x
ninesixty i ditt temas .info-fil engine = phptemplate
base theme = ninesixty
Kopiera page.tpl.php (och
andra filer som du vill ändra)
från ninesixty-mappen till din
eget tema

34. Det finns mer
I den här presentation som är tänkt att hållas kort har vi
utelämnat
.push och .pull
nyttigt för att ordna kodens innehåll efter dess betydelse
vilket bl a underlättar SEO (t ex vill man ofta ha sidans
huvudsakliga text och rubrik tidigt i koden även om
vänsterspalten innehåller en meny). Då kan man lägga
vänsterspalten efter mitten och sedan ”dra” tillbaka den
med css så att den visuellt kommer först. I HTML-koden
är innehållet dock fortfarande ”före” menyn.
ns() function
används för att skapa ”dynamiska” regioner i drupal.

35. Todd is king
Todd Nienkerk som skapat Ninesixty
för Drupal brukar hålla väldigt bra
presentationer om du vill ha en
djupare beskrivning.
Lyssna på honom på DrupalCamp
Stockholm i maj.
Se 115 slides om Ninesixty på
http://fourkitchens.com/
presentations
Eller leta upp Todds och Nathan
Smiths presentationer på Vimeo.