Componenten gebruiken en styling toevoegen

Overzicht van de stappen om styling te importeren en componenten te gebruiken binnen een project.

Voeg binnen het bestand manon.scss een referentie toe naar het gewenste component of stylebestand.
Voeg indien gewenst ook een referentie toe naar het ingevulde variabelen bestand.

Aandachtspunten:

Als er een basis-component aanwezig is dient deze altijd ingeladen te worden.
Het basisbestand dient altijd ingeladen te worden voordat de uitzonderingen of alternatieve weergaven ingeladen worden.

Voorbeelden

Importeer in de .sass of .scss van je project de gewenste componenten:

@use "@minvws/manon/layout/layout-base";

Let op: Indien er een basisbestand beschikbaar is dient deze altijd ingeladen te worden voordat de uitzonderingen en speciale weergaven geimporteerd worden.

@use "@minvws/manon/layout/layout-base";
@use "@minvws/manon/layout/layout-column-2";

Eigen component toevoegen aan een project

Het is ook mogelijk om eigen componenten te schrijven en toe te voegen aan het project. Voeg in dat geval een referentie naar het benodigde css- of scss-bestand toe aan het manon.scss-bestand. Het is ook mogelijk om meerdere "stylesheets" in te laden via de head.

De styling van een component aanpassen

Aanpassen van het component via beschikbare variabelen:

Voeg een kopie van het variabelenbestand van het component toe aan het project en vol deze in met de gewenste stijlkeuzes om de styling van een component te overschrijven via de beschikbare variabelen.
Vul het gekopieerde variabelenbestand in met de gewenste stijlkeuzes om de styling van een component te overschrijven via de beschikbare variabelen. Voor informatie over het aanpassen en overschrijven van variabelen zie variabelen
Voeg de referentie naar het nieuwe bestand toe aan het manon.scss-bestand.

De styling van een component overschrijven

Voeg de css met de gewenste overschrijvingen toe aan het project.