Ninesixty för Drupal (in swedish)

1,190 views

Published on

A brief presentation in Swedish of the Ninesixty Drupal base theme

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,190
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Ninesixty för Drupal (in swedish)

    1. 1. Drupalträff i Malmö 24 feb2011Världshistoriens första.Awesomesom man säger i staterna
    2. 2. LeanderLindahldesigner | Popololeander@popolo.se
    3. 3. Språkförbistring?Engelska ordet grid används av många ävenpå ”webb-svenska”Fenomenet grid har dock funnits länge inomformgivning och arkitektur och på svenskaheter det oftast rutnät. I den härpresentationen blandas orden: rutnät, rutor,kolumner och spalter friskt. Och de avsersamma sak: grid
    4. 4. Vad är ett rutnät(grid)? byggs upp av kolumner kolumnerna är rutnätets minsta enhet
    5. 5. Rännor (gutter) mellanrummet mellan rutorna/kolumnerna
    6. 6. Några exempelModern tysk typografi med rötterna iBauhaus-rörselsen (även InternationalTypographic Style eller Swiss StyleMovement.): Geschwister Scholl Gedenktag
    7. 7. Några exempelModern tysk typografi med rötterna iBauhaus-rörselsen (även InternationalTypographic Style eller Swiss StyleMovement.): Geschwister Scholl Gedenktag
    8. 8. Några exempelRenässansen: Palazzo Rucellai,Florens (disegno della facciata diLeon Battisti Alberti)
    9. 9. Några exempelRenässansen: Palazzo Rucellai,Florens (disegno della facciata diLeon Battisti Alberti)
    10. 10. Några exempelWebb: drupal.org
    11. 11. Några exempelWebb: drupal.org
    12. 12. Man använderkolumner för attdisponera 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. 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. 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. 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. 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 940pxmarginalerna är 10px på vänster och höger sida rännorna är 20px breda
    17. 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 940pxmarginalerna är 10px på vänster och höger sida rännorna är 20px breda
    18. 18. Använda båda tillsammans halvor fjärdedelar
    19. 19. CSS
    20. 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. 21. Rutorna/kolumnernaKolumnerna (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. 22. KolumnbreddenKolumnerna 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. 23. RäknaTä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. 24. Behållaren ochkolumnernatillsammans.container-12 .grid-3 .grid-6 .grid-3
    25. 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. 26. Lägga till prefix och suffix.container-12 .grid-3 .grid-4 .grid-3 .prefix-1 .suffix-1
    27. 27. Fler rader.container-12 .grid-12 .grid-3 .grid-4 .grid-3 .prefix-1 .suffix-1
    28. 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. 29. Skapa nya rader ikolumnernamed ”nestade” divar.container-12 .grid-12 .grid-6 .grid-6 .grid-3 .grid-3 .grid-6
    30. 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-3Att nesta divar bryter layouten eftersom varje .grid-klass har 10 pxmarginal höger och vänster. Raden blir bredare än rutnätet tillåter.
    31. 31. Våra kompisaralpha och omega! Med klasserna .alpha och .omega kan man ta bort en rutas marginaler
    32. 32. Våra kompisaralpha och omega!.container-12 .grid-12 .grid-6 .grid-6 .alpha .omega .grid-3 .grid-3 .grid-3 .alpha .grid-3 .omega
    33. 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. 34. Det finns merI den här presentation som är tänkt att hållas kort har viutelä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. 35. Todd is kingTodd Nienkerk som skapat Ninesixtyför Drupal brukar hålla väldigt brapresentationer om du vill ha endjupare 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.

    ×