Kmom06: CSS-ramverk och grid layout

Bygg ut ditt ramverk med ett grundtema som baseras på LESS och gridbaserad layout. Du utvecklar både ett horisontellt grid och ett vertikalt grid. Du definiera regioner i temat som du fyller med innehåll och du funderar över termer som som grid-layout, fixed layout, flexible layout, responsive layout och mobile first.

(Kursmomentet omfattar cirka 20 studietimmar fördelat på läsanvisningar, uppgifter och övningar samt resultat, redovisning och eftertanke.)

#Läsanvisningar

(ca: 4-8 studietimmar, inklusive extra läsning i referenslitteraturen efter eget val)

#Kurslitteratur

Det finns inga läsanvisningar i kurslitteraturen till detta kursmoment.

Läs följande artiklar som handlar om tankar kring layout på en webbsida.

1) Vad innebär ett typografiskt horisontellt rutnät i webblayout? Läs artikeln “Technical Web Typography: Guidelines and Techniques”.

2) Vad handlar det om med alla varianter på layout av en webbsida? Läs artikeln “Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?”. Det blir förhoppningsvis en inspiration som leder till att du läser på mer i ämnet.

Studera följande webbsidor som handlar om LESS, lessphp och Semantic.gs. Du kommer att använda alla tre i kommande övningar så det är lika bra att du bekantar dig med deras manualsidor.

1) LESS, ett bättre sätt att skriva CSS-kod.

2) lessphp, en kompilator för LESS, skriven i PHP.

3) Semantic.gs, ett gridbaserat ramverk baserat på LESS.

Det finns en samling av artiklar i ämnet, här är ett par som jag kan rekommendera som startpunkt för att få bättre grepp om hur LESS; lessphp och Sematic.gs kan samverka.

• Smashing Magazine: “The Semantic Grid System: Page Layout For Tomorrow”.
• NetTuts+: “How to Squeeze the Most out of LESS”

#Lektionsmaterial

Följande föreläsningsmaterial finns tillgängliga för campus-kursen. Presentationerna kan vara av intresse även för distansstudenter så skumma gärna igenom dem lite snabbt.

• LESS och lessphp med style.php
• Lydia och tema

#Lästips

Här är fler kända CSS-ramverk som är bra att ha koll på. Ägna lite tid att ögna igenom deras webbplatser och studera hur dessa CSS-ramverk är uppbyggda.

1) Bootstrap från Twitter.

2) Blueprint, ett CSS ramverk.

3) 960 gs, ett CSS grid ramverk.

4) Kika även på Normalize.css som är en möjlig ersättare till Erik Meyers reset.css som används i Lydia’s tutorial om temat.

#Övningar & Uppgifter

(ca: 8-14 studietimmar)

#Övningar

1. Gör uppgiften “Autokompilera LESS med lessphp”.

2. Tutorial Lydia: Bygg ett PHP-baserat MVC-inspirerat CMF
   “Lydia: Ett tema med vertikalt och horisontalt grid”. Jobba genom de övningar som finns i femte delen om Lydia.

#Uppgifter

Följande uppgifter skall utföras och resultatet skall redovisas via me-sidan.

1. Bygg ut ditt ramverk med hantering av tema i likhet med Lydia. Länka till ditt ramverk från din me-sida och beskriv hur man kan testa de olika delarna.

#Extra

Känner du för en extra utmaning och djupdykning i ett CSS ramverk byggt på LESS?

1) Använd Bootstrap från Twitter som grund i ditt tema. Du kan ha det i ditt grundtema eller så gör du ytterligare ett tema som baseras på Bootstrap.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

1. Skriv redovisningstext på din me-sida. Skriv ett stycke (minst 15 meningar) om kursmomentet. Reflektera över svårigheter, problem, lösningar, erfarenheter, lärdomar, resultatet, etc.

2. Se till att följande frågor besvaras i texten:

   • Vad tycker du om gridbaserad layout?
   • Vad tycker du om CSS-ramverk i allmänhet och vilka tidigare erfarenheter har du av dem?
   • Vad tycker du om LESS, lessphp och Semantic.gs?
   • Beskriv ditt grundtema, hur tänkte du när du gjorde det, gjorde du några utsvävningar?

3. Kopiera texten och lämna in den på redovisningen ITs tillsammans med en länk till din me-sida. Läraren kommer snabbt kolla igenom dem. Betyg är G (godkänd) eller komplettera (komplettera -> gör om -> gör bättre). Betyget baseras på din redovisningstext samt att din me-sida fungerar.

4. Ta ytterligare en kopia av redovisningstexten och gör ett inlägg i kursforumet. Visa upp vad du gjort och berätta att du är klar. Länka till din me-sida.

Klart! Läs gärna dina med-studenters inlämningar och ställ dina frågor i forumet. Se till att du får dina frågor besvarade.

#Revision history