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.

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

Display

• none
• inline
• 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

Eksempel på klasser med print

Flexbox

Der er opsat en hjælpefunktion som automatisk genererer klasser til flexbox baseret på de definerede breakpoints i $grid-breakpoints. Disse hjælpeklasser er inspireret af Bootstraps Flex Utility. Bemærk at disse hjælpeklasser kun kan anvendes, når display er sat til flexbox. Afsnittene om vandret og lodret justering tager udgangspunkt i at retningen er sat til row.

Retning

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

Retning

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

<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

<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

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

Justering

• start
• end
• center
• between
• around

<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

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

Justering

• start
• end
• center
• baseline
• stretch

<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

<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

<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

Der er opsat en hjælpefunktion som automatisk genererer 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: normal
• Alternativ: alternative
• Modal: 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.4 </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.