Hjælpeklasser

Om hjælpeklasserne

Det Fælles Designsystem tilbyder en række hjælpeklasser, hvis formål er at gøre det nemt at ændre fx størrelse eller placering af et element hurtigt.

Breakpoint

Flere af hjælpeklasserne har responsive muligheder, så man kan justere et element forskelligt afhængigt af skærmstørrelse. Disse klasser vil i de følgende afsnit have værdien {breakpoint} nævnt i deres format. For at gøre en hjælpeklasse responsiv, skal du erstatte {breakpoint} med en af nedenstående værdier.

• Ekstra små skærme (<576px): xs
• Små skærme (≥576px): sm
• Mellem skærme (≥768px): md
• Store skærme (≥992px): lg
• Ekstra store skærme (≥1200px): xl

Eksempelvis vil hjælpeklassen d-md-block kun have effekt på skærmstørrelser over 768px. Se de følgende afsnit for flere detaljer om de forskellige formater.

Tekstjustering

Disse hjælpeklasser bruges til at styre, om en tekst skal være venstrejusteret, centreret eller højrejusteret. Hjælpeklassen sætter CSS-egenskaben text-align på elementet.

Format: align-text-{retning} og align-text-{breakpoint}-{retning}

Retning

• Venstre: left
• Midten: center
• Højre: right

Eksempel

<p class="align-text-right"> Højrejusteret tekst på alle skærme </p>
<p class="align-text-md-center"> Centreret tekst på skærme over 768px </p>

Margin og padding

Disse hjælpeklasser bruges til at styre padding og margin på et element (inspireret af Bootstraps Spacing Utilities).

Format: {egenskab}{retning}-{størrelse} og {egenskab}{retning}-{breakpoint}-{størrelse}.

Egenskab

• m – for klasser som sætter margin
• p - for klasser som sætter padding

Retning

• t – for klasser som sætter margin-top eller padding-top
• b – for klasser som sætter margin-bottom eller padding-bottom
• l – for klasser som sætter margin-left eller padding-left
• r – for klasser som sætter margin-right eller padding-right
• x – for klasser som sætter både*-left og *-right
• y – for klasser som sætter både*-top og *-bottom

Undlades retning sættes margin eller padding på alle 4 sider af elementet.

Størrelse

• 0 – 0px
• 1 – $spacer * 0.25, hvilket som standard er 2px
• 2 – $spacer * 0.5, hvilket som standard er 4px
• 3 – $spacer, hvilket som standard er 8px
• 305 – $spacer * 1.5, hvilket som standard er 12px
• 4 – $spacer * 2, hvilket som standard er 16px
• 405 – $spacer * 2.5, hvilket som standard er 20px
• 5 – $spacer * 3, hvilket som standard er 24px
• 505 – $spacer * 3.5, hvilket som standard er 28px
• 6 – $spacer * 4, hvilket som standard er 32px
• 605 – $spacer * 4.5, hvilket som standard er 36px
• 7 – $spacer * 5, hvilket som standard er 40px
• 705 – $spacer * 5.5, hvilket som standard er 44px
• 8 – $spacer * 6, hvilket som standard er 48px
• 805 – $spacer * 6.5, hvilket som standard er 52px
• 9 – $spacer * 7, hvilket som standard er 56px
• 905 – $spacer * 7.5, hvilket som standard er 60px

Sass-variablen $spacer er som standard sat til 8px.

Eksempel

<p class="mt-8"> Tekst med margin på 48px over elementet </p>
<p class="p-0"> Padding på alle fire sider sat til 0px på elementet </p>
<p class="my-xl-1"> Tekst med margin på 2px over og under elementet på skærme over 1200px </p>

Display

Disse hjælpeklasser bruges til at styre CSS-egenskaben display på et element (inspireret af Bootstraps Display Utility).

Format: d-{display} og d-{breakpoint}-{display}

Display

• none
• inline
• inline-block
• block
• flex
• inline-flex
• print-none
• print-inline
• print-inline-block
• print-block
• print-table
• print-table-row
• print-table-cell
• print-flex
• print-inline-flex

print-værdierne sætter udelukkende display-egenskaben i printformat.

Eksempel

<p class="d-none"> Elementet er skjult </p>
<p class="d-block d-print-none"> Elementet er synligt på skærme, men skjult hvis siden printes </p>
<p class="d-block d-md-inline"> Elementet har display-værdien 'block' på små skærme og værdien 'inline' på skærme over 768px </p>

Flexbox

Disse hjælpeklasser bruges til at sætte de CSS-egenskaber, som er relevante, når display: flex er sat på et element (inspireret af Bootstraps Flex Utility).

Du kan fx sætte display: flex på et element med Det Fælles Designsystems hjælpeklasse d-flex.

Retning

Format: flex-{retning} og flex-{breakpoint}-{retning}

Retning

• row
• column
• row-reverse
• column-reverse

Eksempel

<div class="d-flex flex-row"> Flex-containerens elementer står vandret </div>
<div class="d-flex flex-md-column"> Flex-containerens elementer står lodret på skærme over 768px </div>

Ombrydning

Format: flex-{ombrydning} og flex-{breakpoint}-{ombrydning}

Ombrydning

• wrap
• nowrap
• wrap-reverse

Eksempel

<div class="d-flex flex-nowrap"> Flex-containerens elementer står altid i én række </div>
<div class="d-flex flex-md-wrap"> Flex-containerens elementer kan ombrydes på skærme over 768px </div>

Vandret justering

Bemærk: Eksemplerne tager udgangspunkt i, at retningen er sat til row.

Format: justify-content-{justering} og justify-content-{breakpoint}-{justering}

Justering

• start
• end
• center
• between
• around

Eksempel

<div class="d-flex justify-content-start"> Flex-containerens elementer står til venstre </div>
<div class="d-flex justify-content-md-center"> Flex-containerens elementer står i midten på skærme over 768px </div>

Lodret justering af elementer

Bemærk: Eksemplerne tager udgangspunkt i, at retningen er sat til row.

Format: align-items-{justering} og align-items-{breakpoint}-{justering}

Justering

• start
• end
• center
• baseline
• stretch

Eksempel

<div class="d-flex align-items-start"> Flex-containerens elementer står øverst </div>
<div class="d-flex align-items-md-end"> Flex-containerens elementer står nederst på skærme over 768px </div>

Lodret justering af et enkelt element

Format: align-self-{justering} og align-self-{breakpoint}-{justering}

Justering

• auto
• start
• end
• center
• baseline
• stretch

Eksempel

<div class="d-flex"><div class="align-self-start"> Flex-containerens element står øverst </div></div>
<div class="d-flex"><div class="align-self-md-end"> Flex-containerens element står nederst på skærme over 768px </div></div>

Lodret justering af rækker af elementer

Format: align-content-{justering} og align-content-{breakpoint}-{justering}

Justering

• start
• end
• center
• between
• around
• stretch

Eksempel

<div class="d-flex flex-wrap align-content-start"> Flex-containerens elementer står samlet øverst </div>
<div class="d-flex flex-wrap align-content-md-end"> Flex-containerens elementer står samlet nederst på skærme over 768px </div>

Bredde i procent

Disse hjælpeklasser bruges til at styre bredden på et element.

Format: w-percent-{bredde} og w-percent-{breakpoint}-{bredde}

Bredde

• 10%: 10
• 20%: 20
• 30%: 30
• 40%: 40
• 50%: 50
• 60%: 60
• 70%: 70
• 80%: 80
• 90%: 90
• 100%: 100

Eksempel

<p class="w-percent-100"> Dette element har en bredde på 100% </p>
<p class="w-percent-md-30"> Dette element har en bredde på 30% på skærme over 768px </p>

Baggrundsfarver

Disse hjælpeklasser bruges til at styre baggrundsfarven på et element.

Format: bg-{baggrund}

Baggrundsfarver

• normal
• alternative
• modal

Eksempel

<div class="bg-normal"> Dette element har hvid baggrund </div>
<div class="bg-alternative"> Dette element har lysegrå baggrund </div>
<div class="bg-modal"> Dette element har en sort baggrund med opacity på 0.4 </div>

Position

Disse hjælpeklasser bruges til at sætte CSS-egenskaben position på et element.

Format: position-{position}

Position

• static
• relative
• absolute
• fixed
• sticky

Derudover findes der følgende hjælpeklasser til specifikt at placere et element i toppen eller bunden.

• fixed-top
• fixed-bottom
• sticky-top

Eksempel

<div class="position-absolute"> Dette element har egenskaben 'position: absolute' </div>
<div class="fixed-top"> Dette element sidder i toppen af siden </div>