Grid

När vi utvecklar frontend använder vi en grid (ett rutnät) som består av 12 rutor. Det betyder att vi kan lista kolumner från 1 till 12. Så om man exempelvis vill visa 3 kolumner så tar varje kolumn upp 4 av 12 rutor i rutnätet. Så att lista 1, 2, 3, 4 eller 6 kolumner lika stora är väldigt lätt då det är delbart med 12.

Vi har självklart stöd för andra uppsättningar så längre vi använder 12. Se bilden nedan för inspiration.

Värt att nämna är av vi även kan exempelvis i en column som använder 5 rutor lägga in ett eget rutnät på 12. Sällan man vill det, men det finns möjlighet att göra det utan problem. Mer info finns att hitta här: https://get.foundation/sites/docs/grid.html

Gutter

Gutter som kan jämföras med mellanrum är mellanrummet mellan kolumner. Detta går att ställa in för mobilt och ipad/desktop. Alltså två inställningar som ligger i Admin - Innehåll - Anpassa butik - Generella Inställningar - Mellanrum mellan kolumner. Klicka på den enhet som du vill ändra inställningen på.

Width

Maxbredd på grid (rutnätet) går också att ställa in i Admin - Innehåll - Anpassa butik - Generella Inställningar - Maxbredd på grid. Det finns fall då man vill att sidan alltid ska presenteras i fullbredd, då kan man ställa in detta på 4000px. Standard är 1300px. Kom ihåg att om sidans bredd är mindre än maxbredden på grid så kommer rutnätet att ta upp hela bredden (minus marginaler på sidorna).

Margins

Marginaler på sidorna kan man ställa in i Admin - Innehåll - Anpassa butik - Generella Inställningar - Sidmarginaler. Dessa går att ställa in separat för mobil, ipad och desktop. Klicka på den enhet som du vill ändra sidmarginalerna för. Det är alltså marginalerna från webbläsarfönstrets sidor till själva rutnätet som du ändrar på.

Breakpoints

Breakpoints (brytpunkter) används i BM för att bestämma när kolumner ska ligga bredvid varandra eller byta rad eller i vissa fall även gömmas. Brytpunkerna i BM är som standard small (0 - 639px), medium (640px - 1023px), large (1024px - 1299px), x-large (1300px - 1439px), xx-large (1440px+).

Small är alltså för mobil, medium är för ipad och large är för ipad pro, laptops och desktops. Vi använder idag bara small, medium och large då large blir allt från 1024px och uppåt. Men vi har stöd för bredare sidor och kan använda oss av x-large och xx-large då det behövs. Det kräver dock en del utvecklartid och testning. Ett exempel kan vara att man vill lista 4 produkter i en produktlistning på large (1024px), men kanske lista 5 produkter på x-large och 6 produkter på xx-large. Självklart måste man ha valt en maxbredd på grid som är samma eller större än xx-large (1440px).