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
Innehållsförteckning |
---|
...
outline | true |
---|
Exempel
...
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
...
Do’s and Don’ts
-
Tillgänglighet
-
Research på komponenten
-
Relaterade resurser/komponenter
Sketchbiblioteket
Status
...
Status
...
Status | ||||
---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
.
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.
Publicerad | |
Senast uppdaterad |