Styleguide

Tomrum

Tomrum, det vill säga spacing, används för att definiera utrymmet mellan två vertikala objekt i layouten.

Om tomrum

Alla tomrumsklasser har sina egna responsiva klasser. Till exempel betyder c-space--s md:c-space--m lg:c-space--xl att:

  • c-space--s är standard
  • md:c-space--m är på surfplatta och uppåt
  • lg:c-space--xl är på stationära skämar och uppåt

Om tomrummet inte behöver ändras för olika enheter kan du bara definiera standardtomrummet.

Översikt av storlekarna

Tomrumsklasserna i rem och pixlar

Klassnamn

Storlek i rem

Storlek i pixlar

c-space--xxs

0.125

2

c-space--xs

0,25

4

c-space--s

0,5

8

c-space--m

1

16

c-space--l

2

32

c-space--xl

4

64

Exempel

c-space--xxs
c-space--xs
c-space--s
c-space--m
c-space--l
c-space--xl
HTML 
<div>c-space--xxs</div>
<div class="c-space--xxs"></div>
<div>c-space--xs</div>
<div class="c-space--xs"></div>
<div>c-space--s</div>
<div class="c-space--s"></div>
<div>c-space--m</div>
<div class="c-space--m"></div>
<div>c-space--l</div>
<div class="c-space--l"></div>
<div>c-space--xl</div>
<div class="c-space--xl"></div>

Senast publicerad

Sidansvarig för sidan är Styleguide