Spacing

Spacing-skalaen til Punkt går fra 0 til 128px og brukes i alle komponentene vi lager i designsystemet. Bruk spacing når du bygger individuelle komponenter til dine skisser.

Alle våre elementer er utformet etter en 8-punkts skala med en grunnlinje på 8px. 8-punkts skalaen er ment å sikre visuell konsekvens og balanse på tvers av alle elementer. Elementhøyder, bredder, padding og margin skal følge en skala på 8.

Variabler

Alle spacing-verdiene er tilgjengelige som et Sass map i abstracts/variables/_spacing.scss.

$spacing: (
  'size-0': 0rem,
  'size-2': 0.125rem,
  'size-4': 0.25rem,
  'size-6': 0.375rem,
  'size-8': 0.5rem,
  'size-12': 0.75rem,
  'size-16': 1rem,
  'size-24': 1.5rem,
  'size-32': 2rem,
  'size-40': 2.5rem,
  'size-48': 3rem,
  'size-56': 3.5rem,
  'size-64': 4rem,
  'size-72': 4.5rem,
  'size-80': 5rem,
  'size-88': 5.5rem,
  'size-96': 6rem,
  'size-104': 6.5rem,
  'size-128': 8rem,
) !default;

CSS-klasser

Punkt inkluderer hjelpeklasser for enkelt å sette responsiv margin og padding for å tilpassse et elements utseende.

Hjelpeklassene er bygget opp slik:

{type}{retning}-{størrelse}

I tillegg kan du legge på fra hvilket breakpoint det gjelder fra (frivillig):

{type}{retning}-{størrelse}--{breakpoint}-up

Lær mer om verdier for breakpoints på siden som omhandler breakpoints.

Navn	Mulige verdier
Type	m for margin
	p for padding
Retning	t for topp
	r for høyre
	b for bunn
	l for venstre
	x for horisontalt
	y for vertikalt
Størrelse	size-0 for 0px
	size-2 for 2px
	size-4 for 4px
	size-6 for 6px
	size-8 for 8px
	size-12 for 12px
	size-16 for 16px
	size-24 for 24px
	size-32 for 32px
	size-40 for 40px
	size-48 for 48px
	size-56 for 56px
	size-64 for 64px
	size-72 for 72px
	size-80 for 80px
	size-88 for 88px
	size-96 for 96px
	size-104 for 104px
	size-128 for 128px

Eksempel

<!-- Margin bunn settes til 24px (1.5rem) -->
<p class="mb-size-24">Margin bunn</p>

<!--
margin til høyre settes til 0
padding top settes til 24px (1.5rem)
-->
<p class="mr-size-0 pt-size-24">margin høyre og padding topp</p>

<!--
padding settes til 12px (0.75rem) til venstre og høyre
Ved breakpoint laptop og større endres dette til 24px (1.5rem)
-->
<p class="px-size-12 px-size-24--laptop-up">Horisontal padding</p>

Responsiv spacing hentes inn selv

Klassene med --{breakpoint}-up ligger i en egen fil. De var over halvparten av reglene i pkt-base, og nesten ingen bruker dem, så fra Punkt 19 følger de ikke med automatisk. Dette gjelder uansett hvordan du henter Punkt, også hele bundlen.

Med SCSS:

@use '@oslokommune/punkt-css/dist/scss/pkt';
@use '@oslokommune/punkt-css/dist/scss/pkt-spacing-responsive';

Fra CDN:

<link href="https://punkt-cdn.oslo.kommune.no/19/css/pkt.min.css" rel="stylesheet" />
<link
  href="https://punkt-cdn.oslo.kommune.no/19/css/pkt-spacing-responsive.min.css"
  rel="stylesheet"
/>

Bruker du @layer, finnes pkt-spacing-responsive.layer ved siden av pkt.layer. Det er viktig at den havner i samme layer som resten av Punkt. Ligger den utenfor, vinner den over alt annet, også over dine egne overstyringer.

Bruk i SCSS

Du kan også hente verdiene direkte fra Sass-mappet med map.get:

@use 'sass:map';
@use '@oslokommune/punkt-css/dist/scss/abstracts/variables';

.wrapper {
  padding: map.get(variables.$spacing, 'size-24');
}

Egne spacing-verdier

Punkt genererer hjelpeklassene ut fra $spacing, så du kan legge tilbake en verdi vi har fjernet, eller legge til en vi aldri har hatt. Legg oppsettet i en egen fil, og hent den inn før Punkt:

// punkt-config.scss
@use 'sass:map';
@use '@oslokommune/punkt-css/dist/scss/abstracts/variables' as v;

v.$spacing: map.merge(
  v.$spacing,
  (
    'size-52': 3.25rem,
    'size-200': 12.5rem,
  )
);

// main.scss
@use 'punkt-config';
@use '@oslokommune/punkt-css/dist/scss/pkt';

Med map.merge beholder du hele lista vår og legger bare til dine egne verdier. Du slipper å kopiere den, og du kan ikke komme i skade for å fjerne en verdi komponentene våre trenger.

Rekkefølgen i $spacing bestemmer hvilken klasse som vinner når to av samme type står på samme element, så behold rekkefølgen fra vår liste hvis du er i tvil. Det samme mønsteret virker for breakpoints.