Grids

Grids skapar ramen inom vilken innehåll kan placeras. Gridens kolumner och mellanrum styr hur innehållet kan placeras på den givna ytan.

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

För att standardisera designarbetet och underlätta för så väl design- och konceptprocesserna som för utvecklingen av gränssnittet så används ett sk. gridsystem. Gridsystemet består av kolumner (columns) och mellanrum (gutters). Detta underlättar när man jobbar med responsivitet och där innehållet ska gå att tillgodogöra sig på bästa sätt på olika skärmstorlekar.

Kolumner, bredd och marginaler

• Grids ser likadana ut oavsett varumärke.

• Griden vi använt är baserad på 12 kolumner för dator och tablet, samt övergår till 6 kolumner för mobil.

• Griden är 1260 px bred och har 10 px marginal på varje utsida av griden för att skapa en totalbredd på 1280 px. Marginalen är till för text och grafiska element inte ska ligga dikt an mot skärmens kant.

• I Figma finns olika grids för olika ändamål:
  Desktop, Desktop Wide (främst för adminsystem, där innehållet har mindre marginaler) och Mobil.
  

Breakpoints

I design är komponenter anpassade till antingen desktop grid eller mobilt grid. I kod använder vi oss av tre olika breakpoints enligt storleksmodellen small, medium och large:

• Default >1024px

• Medium <1024px >640px

• Small <640px

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.