Grids

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

Open

Desktop Grid

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

Exempel på Desktop Grid och Desktop Grid Wide

Desktop Grid har idag marginalen 88 px på vardera sida. I Desktop Grid Wide minskar marginalen till 20 px för att kunna nyttja mer yta på bredden. De exempel som finns under detta avsnitt visar hur samma gränssnitt i en admin-tjänst förändras baserat på vilket grid som används.

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.