• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ninesixty för Drupal (in swedish)
 

Ninesixty för Drupal (in swedish)

on

  • 1,185 views

A brief presentation in Swedish of the Ninesixty Drupal base theme

A brief presentation in Swedish of the Ninesixty Drupal base theme

Statistics

Views

Total Views
1,185
Views on SlideShare
1,185
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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) Ninesixty för Drupal (in swedish) Presentation Transcript

  • Drupalträff i Malmö 24 feb2011Världshistoriens första.Awesomesom man säger i staterna
  • LeanderLindahldesigner | Popololeander@popolo.se
  • 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
  • Vad är ett rutnät(grid)? byggs upp av kolumner kolumnerna är rutnätets minsta enhet
  • Rännor (gutter) mellanrummet mellan rutorna/kolumnerna
  • Några exempelModern tysk typografi med rötterna iBauhaus-rörselsen (även InternationalTypographic Style eller Swiss StyleMovement.): Geschwister Scholl Gedenktag
  • Några exempelModern tysk typografi med rötterna iBauhaus-rörselsen (även InternationalTypographic Style eller Swiss StyleMovement.): Geschwister Scholl Gedenktag
  • Några exempelRenässansen: Palazzo Rucellai,Florens (disegno della facciata diLeon Battisti Alberti)
  • Några exempelRenässansen: Palazzo Rucellai,Florens (disegno della facciata diLeon Battisti Alberti)
  • Några exempelWebb: drupal.org
  • Några exempelWebb: drupal.org
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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
  • Använda båda tillsammans halvor fjärdedelar
  • CSS
  • 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)
  • 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; }
  • 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
  • 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 */ }
  • Behållaren ochkolumnernatillsammans.container-12 .grid-3 .grid-6 .grid-3
  • 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)
  • Lägga till prefix och suffix.container-12 .grid-3 .grid-4 .grid-3 .prefix-1 .suffix-1
  • Fler rader.container-12 .grid-12 .grid-3 .grid-4 .grid-3 .prefix-1 .suffix-1
  • 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 -->
  • Skapa nya rader ikolumnernamed ”nestade” divar.container-12 .grid-12 .grid-6 .grid-6 .grid-3 .grid-3 .grid-6
  • .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.
  • Våra kompisaralpha och omega! Med klasserna .alpha och .omega kan man ta bort en rutas marginaler
  • 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
  • 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
  • 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.
  • 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.