Kmom03: Layout

By . Latest revision .

Vi ska denna vecka kolla på olika sätt att strukturera upp stommen av vår sida, vår layout. Att uppdatera vår layout är en av de större ändringar vi kan göra med hjälp av CSS/SASS, utan att uppdatera vår HTML.

Några av de tekniker vi ska kolla lite närmre på är Flexbox och CSS-Grid, som är två vanliga sätt att gå tillväga. Tanken är att ni i slutet av kursmomentet ska implementera dessa tekniker i eran portfolio.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läs & Studera

(ca: 8-10 studietimmar)

#Kurslitteratur

Läs följande:

  1. Läs i boken “The principles of Beautiful Web Design”.

    • Kap 1: Layout and Composition (repetera)

#Design med HTML5 och CSS3

  1. Läs igenom följande sektion i guiden “Design med HTML5 och CSS3”.

I sektionen Layout tittar vi på hur vi med hjälp utav Flexbox och CSS-Grid kan ändra sidans layout så den fungera bra oavsett skärmstorlek.

#Grid-baserad layout och Flex

Läs följande för att få en introduktion och översikt till gridbaserad layout och flexbox.

  1. Läs två artiklar om “History of the design grid I” och “History of the design grid II” för att få en överblick om vad gridbaserad layout handlar om.

  2. Det finns en artikel hos Design Systems, “Space, Grids and Layouts” som överskådligt går igenom en del saker som vi nämnde i förra kursmomentet utöver hur man kan tänka kring layout.

  3. CSS-Tricks erbjuder en hel del trevliga guider för oss webbutvecklare, särskilt inom just Flexbox och CSS-Grid. De har väldigt tydliga exempel som gör det lätt att förstå hur de olika teknikerna beter sig samt vilka CSS-regler som finns tillgängliga. Du kan läsa mer om det i dessa tre artiklar:

#Övrigt

  1. Artikeln “Design elements and Principles” går igenom olika design element och principer och är bra att läsa igenom under kursens gång.

  2. I uppgiften så ska ni tolka Wireframes, vill man läsa mer om det kan man göra det här.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Övningar

  1. Följande delar av guiden bör genomföras:

  2. Arbeta igenom artikeln Skapa en specifik layout i Pico som beskriver hur du kan skapa en layout för specifika sidor.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Lös uppgiften “Bygg om din rapport-sida med CSS-Grid”.

  2. Försäkra dig om att du har gjort dbwebb publish me och taggat din inlämning med version 3.0.0 (eller högre) samt pushat repot inklusive taggarna till GitHub.

#Testa din inlämning

I detta kursmoment jobbar vi utifrån wireframes som finns tillgängliga i “Bygg om din rapport-sida med CSS-Grid”.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Hur har det gått att jobba med CSS-Grid/Flexbox?
  • Har du jobbat med dessa tekniker sedan tidigare? Vad anser du om det?
  • Har du försökt dela upp din SASS-kod i olika moduler? Kanske har du skapat en ny modul som är din layout?
  • Valde du att göra om din sidas layout eller nöjde du dig med report sidan?
  • Vilken är din TIL för detta kmom?

#Revision history

  • 2020-10-15: (A, nik) Nysläpp för design-v3

Document source.