Bygg ut ditt tema med stöd för vertikalt och horisontellt grid

Du skall fortsätta utveckla ditt tema till Anax Flat. Du skall implementera stöd för ett vertikalt grid och för ett horisontellt grid. Du skall bygga ut ditt tema så att det blir responsivt och samtidigt fylla det med ett medvetet val av typografi.

#Förkunskaper

Du har jobbat igenom artiklarna “Använd ett vertikalt grid med Anax Flat” och “Skapa ett horisontellt grid för typografi”.

#Introduktion

Du har en version av Anax Flat som ligger i katalogen me/anax-flat. Det är ett eget repo på GitHub som är taggat i minst version 2.*.

Du har en version av temat som ligger i katalogen me/anax-flat/theme. Det är ett eget repo på GitHub som är taggat i minst version 2.*.

En filosofi som kan komma till nytta här är POGE - Principle of good enough. Att försöka matcha gridet in absurdum kan vara kostsamt, beroende på ens förmåga, tålamod och envishet.

#Testa hur väl dbwbeb följer gridet

Du kan utvärdera hur väl dbwebb följer det vertikala och det horisontella gridet. Lägg till ?vgrid eller ?hgrid till godtycklig länk, så här:

• https://dbwebb.se/?vgrid
• https://dbwebb.se/?hgrid

Du kan ställa frågor om hur detta fungerar i forumtråd om “Visa gridet på godtycklig sida”. Du skall göra samma sak själv i uppgiften nedan.

#Krav

#Del 1 Vertikalt grid

1. Kopiera de grid-filer som finns i exemplet under example/grid/fluid/less/grid*. Lägg till dem så att de finns med i ditt tema. Lägg till båda i din modules.less, men kommentera bort den ena så att du bara har ett grid aktivt.

2. Skapa en fil modules/layout.less där du stylar din Anax Flat enligt ditt valda grid. Förslagsvis använder du mellan 960px till 1200px som största storlek och du använder 12 eller 24 kolumner, eller välj efter eget huvud. Detta är nu basen i ditt aktiva tema. Kommentera bort din tidigare modules/regions.less så den inte används från modules.less.

3. Skapa en modules/grid-helpers.less och lägg en mixin som visualiserar gridet. Mixinen skall heta .showGrid() och ta ett argument som är gridets maximala storlek. De bilder du behöver lägger du enklast i htdocs/img/grid.

4. Skapa en ny sida content/grid.md. Lägg in den sidan i menyn. När man tittar på den sidan skall gridet visas i bakgrunden. Se till att sidan är fylld med innehåll. Sidan skall innehålla minst en sidebar (sidebar-left eller sidebar-right) med innehåll.

5. Gör ditt tema responsivt med media queries och förberett för mindre skärmar.

6. Lägg till så att ?vgrid fungerar på godtycklig sida likt https://dbwebb.se/?vgrid.

#Del 2 Horisontellt grid (testa)

1. Aktivera det typografiska grider genom att kopiera de relevanta LESS-filer som finns i exemplet under example/typography-grid/less/typography-*. Lägg till dem så att de finns med i ditt tema.

2. Aktivera typografin och förändra den som du vill (gör medvetna val). Förslagsvis kan förändra typsnitt och storlekar på texten, uppdatera ditt typografiska grid om det krävs.

3. Skapa en sida content/typography.md. Lägg in sidan i menyn. Fyll sidan med text och typografiska element som visar hur du stylat dem. Ungefär som textmassan som fanns i exemplet. När man tittar på sidan skall gridet visas i bakgrunden. De typografiska elementen skall någorlunda väl matcha gridet.

4. Gör så att alla regioner på sidan (till exempel flash, main och footer-regionerna) matchar det magiska numret och lutar mot det typografiska gridet. Använd @magicNumber där det finns möjlighet och jobba främst med margin-bottom. Gör det tillräckligt bra.

5. Lägg till så att ?hgrid fungerar på godtycklig sida likt https://dbwebb.se/?hgrid.

#Klar och taggad

1. Se till att ditt tema passerar testerna som körs vid make test.

2. Kör git status och se till att alla filer, som skall vara en del av dina båda repon me/anax-flat och me/anax-flat/theme, verkligen är en del av repot.

3. Du committar och taggar de båda repona som version 3.0.0.

4. Pusha upp repona till GitHub, inklusive taggarna.

5. Om du behöver göra fler taggar så gör du enligt 3.0.1, 3.0.2 och så vidare. Om du får komplettering så skall du alltid tagga en ny version när du är klar med kompletteringen samt pusha upp till GitHub.

6. Gör en dbwebb publish för att kolla att allt fungerar.

$ dbwebb publish me

#Extrauppgift

Gör följande extrauppgifter om du har tid och lust.

1. Istället för att använda källkoden för det vertikala gridet från kursrepot så installerar du npm-modulen desinax-vertical-grid och använder källkoden därifrån istället. Då får du bättre versionskoll och du kan enklare integrera installation (och update) av modulen i din makefile.

2. Gör motsvarande för det typografiska gridet via npm-modulen desinax-typographic-grid.

#Tips från coachen

Ta det lugnt och försök förstå hur LESS-koden fungerar. Lägg också tid på att försöka finna en god struktur i hur du fördelar koden i dina LESS-moduler. Dela upp det som är grunden och återanvändbart kontra det som är specifik anpassning av grunden.

Kom ihåg att om du förändrar innehåll i temat så kan du även behöva committa och tagga om din version av Anax Flat, eftersom temats filer kopieras dit. Tipset är att tagga i slutet, när du känner dig klar.

Lycka till och hojta till i forumet om du behöver hjälp!

#Revision history