Main

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:

Layout-basisset

HTML-voorbeeld:

`main`:

<main>
  <!-- Content -->
</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";

Instelbare variabelen

Instelbare variabelen tabel:
Variabele	CSS-attribuut	Manon ingestelde waarde	Breekpunt	Class
--main-flex-direction	flex-direction	var(--content-flex-direction)	-	-
--main-justify-content	justify-content	var(--content-justify-content)	-	-
--main-gap	gap	0	-	-
--main-padding-top	padding-top	0	-	-
--main-padding-right	padding-right	0	-	-
--main-padding-bottom	padding-bottom	0	-	-
--main-padding-left	padding-left	var(--page-whitespace-left)	-	-
--main-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: ;
}