Layout set

Basisset voor het vastleggen van layout-keuzes vanuit een centraal punt.

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project.
   • Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
   • Vul de variabelen met de gewenste weergaven. Voor meer informatie zie het overzicht met instelbare variabelen.
   • Pas de layoutkeuzes toe waar nodig. De layoutkeuzes kunnen door middel van variabelen binnen de CSS worden toegevoegd. Voor meer informatie hierover zie CSS-variabelen gebruiken.

Voorbeelden

Variabele gebruiken binnen een andere variabele

In dit voorbeeld stellen we de padding aan de bovenkant van de main in op basis van een variabelen die gezet is binnen deze set. In dit geval zetten we de witruimte aan de bovenkant van de pagina bovenaan de main.

CSS-voorbeeld:

:root {
  --main-padding-top: var(--page-whitespace-top);
}

Voor meer informatie hierover zie CSS-variabelen gebruiken.

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/layout-set";

Instelbare variabelen

CSS

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

:root {
  /* Page */
  --page-whitespace-top: ;
  --page-whitespace-right: ;
  --page-whitespace-bottom: ;
  --page-whitespace-left: ;

  /* Content */
  --content-flex-direction: ;
  --content-justify-content: ;
  --content-align-items: ;
  --content-gap: ;
  --content-padding-top: ;
  --content-padding-right: ;
  --content-padding-bottom: ;
  --content-padding-left: ;
  --content-max-width: ;
}