Gå til sidens indhold

Kode

Hjælpeklasser (Utilities)

Responsive hjælpeklasser

Alle de klasser som bliver genereret af hjælpefunktionerne findes både i en version som virker i alle browserstørrelser og i responsive versioner som genereres på baggrund af de breakpoints som er defineret i scss-variablen $grid-breakpoints:

$grid-breakpoints: ( 
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

Text-align

Der er opsat en hjælpefunktion som automatisk genererer klasser til text-align baseret på de definerede breakpoints i $grid-breakpoints.

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

Retning:

  • Venstre: text-align: left
  • Midten: text-align: center
  • Højre: text-align: right

Eksempel:

<h1 class="align-text-right">Tekst til højre</h1>
<h1 class="align-text-md-left">Tekst til højre på skærme over 768px</h1>;

Margin og padding

Der er opsat hjælpefunktioner som genererer klasser til margin og padding. Disse hjælpefunktioner er inspireret af Bootstraps Spacing Utilities.

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

CSS 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
  • blank – for klasser som sætter margin eller padding på alle 4 sider af elementet.

Størrelse:

  • 0 – for klasser som fjerner alt margin eller padding
  • 1 – for klasser som sætter margin eller padding til $spacer * 0.25
  • 2 – for klasser som sætter margin eller padding til $spacer * 0.5
  • 3 – for klasser som sætter margin eller padding til $spacer
  • 305 – for klasser som sætter margin eller padding til $spacer * 1.5
  • 4 – for klasser som sætter margin eller padding til $spacer * 2
  • 405 – for klasser som sætter margin eller padding til $spacer * 2.5
  • 5 – for klasser som sætter margin eller padding til $spacer * 3
  • 505 – for klasser som sætter margin eller padding til $spacer * 3.5
  • 6 – for klasser som sætter margin eller padding til $spacer * 4
  • 605 – for klasser som sætter margin eller padding til $spacer * 4.5
  • 7 – for klasser som sætter margin eller padding til $spacer * 5
  • 705 – for klasser som sætter margin eller padding til $spacer * 5.5
  • 8 – for klasser som sætter margin eller padding til $spacer * 6
  • 805 – for klasser som sætter margin eller padding til $spacer * 6.5
  • 9 – for klasser som sætter margin eller padding til $spacer * 7
  • 905 – for klasser som sætter margin eller padding til $spacer * 7.5

$spacer er sat til 8px.

Du kan selv tilføje flere muligheder ved at tilføje dem til $spacers variablen.

Breakpoint:

  • blank - for klasser som sætter margin eller padding for alle browserstørrelser.
  • sm - for klasser som sætter margin eller padding for browserstørrelser over 576px;
  • md - for klasser som sætter margin eller padding for browserstørrelser over 768px;
  • lg - for klasser som sætter margin eller padding for browserstørrelser over 992px;
  • xl - for klasser som sætter margin eller padding for browserstørrelser over 1200px;

Display

Der er opsat en hjælpefunktion som automatisk genererer klasser til display-egenskaben baseret på de definerede breakpoints i $grid-breakpoints. Disse hjælpeklasser er inspireret af Bootstraps Display Utility.</p>

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

Display

  • none
  • inline-block
  • block
  • flex
  • inline-flex

Print display

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

Eksempel med grid breakpoints

Browserstørrelse Klasse
Skjul på alle `d-none`
Skjul kun på xs `d-none d-sm-block`
Skjul kun på sm `d-sm-none d-md-block`
Skjul kun på md `d-md-none d-lg-block`
Skjul kun på lg `d-lg-none d-xl-block`
Skjul kun på xl `d-xl-none`
Synlig på alle `d-block`
Synlig kun på xs `d-block d-sm-none`
Synlig kun på sm `d-none d-sm-block d-md-none`
Synlig kun på md `d-none d-md-block d-lg-none`
Synlig kun på lg `d-none d-lg-block d-xl-none`
Synlig kun på xl `d-none d-xl-block`

Eksempel på klasser med print

Beskrivelse Klasse
Skjul ved print `d-print-none`
Vis element med inline display ved print `d-print-inline`
Vis element med inline-block display ved print `d-print-inline-block`
Vis element med block display ved print `d-print-block`
Vis element som tabel display ved print `d-print-table`
Vis element som en tabel række display ved print `d-print-table-row`
Vis element med tabel celle display ved print `d-print-table-cell`
Vis element med flex display ved print `d-print-flex`
Vis element med inline-flex display ved print `d-print-inline-flex`

Bredde i procent

Der er opsat en hjælpefunktion som automatisk generere klasser som styrer bredde i procent. De responsive klasser er baseret på de definerede breakpoints i $grid-breakpoints.

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:

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

Baggrundsfarver

Der er opsat en hjælpefunktion som automatisk genererer klasser som styrer baggrundsfarver.

Format: bg-{baggrund}

Baggrundsfarver

  • Normal: $background-normal
  • Alternativ: $background-alternative
  • Modal: $background-modal

Eksempel:

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

Tilgængelighed

Nedenfor vises hvordan du gør dine elementer tilgængelige for skærmlæsere.

  • aria-hidden="true" og aria-hidden="false" bruges til at skjule og vise elementer for skærmlæsere.
  • .sr-only klassen og mixin @mixin sr-only() bruges når elementer kun skal vises for skærmlæsere.
  • aria-expanded="true" og aria-expanded="false" bruges til elementer som toggler mellem at være åbne og lukket.
  • aria-label="" skal beskrive hvad funktionen af et element gør.