Spacing

Variabler

Alle spacing-verdiene er tilgjengelige som et Sass map i _settings.scss.

$spacing: (
  'size-0': 0rem,
  'size-2': 0.125rem,
  'size-4': 0.25rem,
  'size-8': 0.5rem,
  'size-12': 0.75rem,
  'size-16': 1rem,
  'size-24': 1.5rem,
  'size-32': 2rem,
  'size-40': 2.5rem,
  'size-64': 4rem,
  'size-104': 6.5rem,
) !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.

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>

SCSS funksjon

Du kan også ta i bruk spacing-stilene med mixin get-text:

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

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