Main content wrapper

Benodigde stappen:

  • Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  • Maak gebruik van en layout set om stijlkeuzes voor de layout centraal vast te leggen en in verschillende componenten te gebruiken. Denk bijvoorbeeld aan het vastleggen van de afstand tussen de blokken binnen de main, een article en een section. Voor meer informatie zie: Gebruik maken van een layout-set.

Gebruik maken van een layout-set

Layout-sets kunnen gebruikt worden om op een centrale plek de stijlkeuzes vast te leggen voor layout-gerelateerde keuzes.

Beschikbare styling sets voor layout zijn:

HTML-voorbeeld:

main:

--> 
<main>
  <div> <!-- this div is the content wrapper -->
    <!-- Content -->
  </div>
</main>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via NPM

CSS-voorbeeld:

@use "@minvws/manon/main-content-wrapper";

Instelbare variabelen

Instelbare variabelen tabel:
Variabele CSS-attribuut Manon ingestelde waarde Breekpunt Class
--main-content-wrapper-flex-direction flex-direction var(--content-flex-direction) - -
--main-content-wrapper-justify-content justify-content var(--content-justify-content) - -
--main-content-wrapper-align-items align-items var(--content-align-items) - -
--main-content-wrapper-gap gap 0 - -
--main-content-wrapper-padding-top padding-top 0 - -
--main-content-wrapper-padding-right padding-right 0 - -
--main-content-wrapper-padding-bottom padding-bottom 0 - -
--main-content-wrapper-padding-left padding-left var(--page-whitespace-bottom) - -
--main-content-wrapper-max-width max-width 100% - -

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
  --main-flex-direction: ;
  --main-justify-content: ;
  --main-gap: ;
  --main-padding-top: ;
  --main-padding-right: ;
  --main-padding-bottom: ;
  --main-padding-left: ;
  --main-max-width: ;
}