Kmom02: LESS och responsiv design

Låt oss påbörja skapandet av vårt eget tema till webbplatsen. Vi fyller vår me-sida med style med hjälp av LESS och vi eftersträvar en god och modulariserad kodstruktur.

Stylen skapar vi med LESS, en preprocessor till CSS. Vi skall skapa en modulär struktur av LESS-filer, LESS-moduler, som blir enkla att återanvända. Stylen vi skapar gör vi responsiv så att den anpassar sig för skärmens storlek. Våra webbplatser behöver fungera lika bra på desktop liksom på läsplatta och mobil.

Vi behöver alltså lära oss LESS och responsiv design samt hur LESS förhåller sig till CSS.

Vi behöver också fortsätta att bekanta oss generellt med begreppen webbdesign och användbarhet på webben. Det viktigt med förståelse för vissa grundkoncept inom området.

Vi börjar försiktigt för att se hur LESS fungerar tillsammans med Anax Flat och hur vi kan jobba med ett tema via moduler i LESS.

I nästa kmom bygger vi vidare på temat med grid-baserad layout. Så det kommer mera och det gör inget om du tar det lite lugnt med stylen i detta kmom.

(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äsanvisningar

(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

#Tekniker för att skriva för webben

1. Läs följande kapitel i guiden “Skriva för webben”.

   • 3. Hur vi läser på webben

#Webbdesign och användbarhet

Läs följande artiklar.

1. Läs artikeln “The Fold Manifesto: Why the Page Fold Still Matters”.

2. Läs artikeln “Menu Design: Checklist of 15 UX Guidelines to Help Users”.

#Kom igång med LESS

1. Läs översiktligt Kalles artikel om CSS preprocessors, “CSS Preprocessors are cool”. Artikeln behandlar skillnader och likheter mellan LESS och SASS. Artikeln är också en god introduktion till vad en CSS pre-processor är och gör.

2. Bekanta dig med LESS och se vad det kan göra. Det är uppbyggd som ett programmeringsspråk, så kika på både på “Language reference” och på “Function reference”.

3. Kika på hur du kan nollställa style med Normalize.css samt läs snabbt om hur Normalize fungerar och vem som använder det.

#Responsiv webbdesign

1. Läs översiktligt artikeln som definierade begreppet “Responsive Web Design”.

2. Bläddra snabbt igenom artikeln “Multi-Device Layout Patterns” som definierar ett antal design mönster inom responsiv design.

3. Kika snabbt på materialet då Google Developers visar hur man kommer igång med grunderna i responsiv layout.

#Video

Titta på följande:

1. Till kursen finns en videoserie, “Teknisk webbdesign och användbarhet”, kika på de videor som börjar på 2. Videorna som börjar på 210* är kopplade till en av de artiklar du skall jobba igenom under övningarna nedan. Titta på dem samtidigt som du jobbar igenom artikeln.

2. Det finns en videoserie “Lär dig LESS” som visar hur du kommer igång och jobbar med LESS. Spellistan visar grundkonstruktioner i LESS.

#Lästips

Kika igenom följande styleguides till CSS för att få en känsla av hur du bör/kan skriva din CSS-kod.

1. Kika snabbt igenom “Google HTML/CSS Style Guide”.

1. De valideringsregler som gäller för CSS-kod i dbwebb-kurser är samlade i repot desinax/css-styleguide. Repot finns även som ett npm-paket css-styleguide. Du kan diskutera stylen i forumet.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Övningar

Genomför följande övning för att förbereda inför uppgifterna.

1. Kom igång med LESS och skapa en struktur av LESS-filer, eller LESS-moduler. Det blir ett modulärt sätt att bygga upp sitt tema till webbplatsen. Gör detta genom att jobba igenom artikeln “Bygg ett tema till Anax Flat”.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Lös uppgiften “Bygg en ut ditt Anax Flat med eget LESS tema”.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

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

• Vad tycker du om LESS så här långt, och det sättet vi jobbar med LESS-moduler i vårt tema?
• Hur kändes det att kompilera LESS till CSS, var det något du reflekterade över?
• Har du varit bekant med Makefiler och make sedan tidigare, eller något liknande byggverktyg? Hur uppfattar du make så här långt?
• Fann du nytta i de videor som var kopplade till detta kursmoment?

#Revision history