Styleguide

Tomrum

När du använder rätt tomrum, det vill säga spacing, runt komponenterna blir innehållet enklare att förstå. I styleguiden finns det förutbestämnda tomrum som gör användarens upplevelse enhetlig.

Rätt tomrum gör det enklare för användaren

Genom att använda rätt tomrum kan du skapa en design som användaren tycker är enkel, begriplig och trovärdig. Tänk på att:

  • Innehåll som hör ihop ska ha mindre tomrum mellan sig i förhållande till annat innehåll.
  • Innehåll som är viktigt ska lyftas fram genom att ha större tomrum runt sig.
  • Var konsekvent genom hela designen så att du till exempel inte väljer18 pixlar på ett ställe och 19 på ett annat.

Använd de förutbestämda tomrummen

För att slippa komma ihåg pixlar och rem kan du använda styleguidens förutbestämda storlekar på tomrum. I Styleguiden finns ett färdigt system med CSS-variabler så att du inte ska behöva komma ihåg exakt pixel. Du kan istället välja mellan förutbestämda storlekar på tomrummet.

Förutbestämda storlekar

CSS-variabel

Klassnamn

Pixel

Rem

--space-010




2

0.125

--space-020

.xx-xx-1

4

0.25

--space-030


6

0.375

--space-040

.xx-xx-2

8

0.5

--space-050


12

0,75

--space-060

.xx-xx-3

16

1,0

--space-070

.xx-xx-4

24

1,5

--space-080


32

2,0

--space-090

.xx-xx-5

48

3,0

--space-100


64

4,0

--space-110


96

6,0

--space-120


128

8,0

Klasser för tomrum

Med hjälp av tomrumsklasserna i styleguiden kan du lägga till tomrum via ett klassattribut. Klasserna följer mönstret:

[space-type][location]-[breakpoint]-[size]

Tomrumsklasser

Attribut

Obligatoriskt

Värde

Beskrivning

space-type

ja

“margin”, “padding”


location

nej

“y”, “x”, “top”, “bottom”, “left”, “right”

y betyder top och bottom.

x betyder left och right.

Om du inte använder attributet blir det ett lika stort tomrum på alla sidor.

breakpoint

nej


Om du inte använder ett attribut blir avståndet alltid samma oavsett brytpunkt. Om du använder attributet träder det bara in när du antingen kommit upp till brytpunkten, när du passerat brytpunkten eller när brytpunkten åsidosätts av en annan klass.

size

ja


Se tabellen med "Förutbestämda storlekar".

Senast publicerad

Sidansvarig för sidan är Styleguide