Stijlkeuzes op applicatie-niveau

Een eigen visuele weergave voor de applicatie die aansluit bij de huisstijl. CSS maakt gebruik van een "cascading"-principe. Dit betekent dat je op een plek stijlkeuzes vast kunt leggen en dat alle onderliggende elementen deze stijlkeuzes kunnen overerven.

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 stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
   • Waar mogelijk zullen elementen gebruik maken van deze variabelen. Gebruik de variabelen of de classes om de kleuren toe te passen waar nodig.

Tip: Vaak is het mogelijk om keuzes op een hoog niveau te definiëren, of te wel op een element dat in de html-strucuur eerder aangemaakt is. Als je in de praktijk merkt dat je een bepaalde stijlkeuze vaker moet definiëren is het altijd goed om te kijken of dit op een hoger gelegen element kan. Dit bespaart werk en verkleint de kans op fouten.

Voorbeelden

Variabele gebruiken binnen een andere variabele

De knoppen binnen het "button-base"-bestand maken gebruik van de accentkleur als deze binnen het "application-base"-bestand gedefinieerd staat. Voor meer informatie zie CSS-variabelen gebruiken

CSS-voorbeeld:

:root {
--button-base-background-color: var(--application-base-accent-color);
}

Bijbehorende bestanden

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

Aandachtspunten:

• De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie.

Importeer component via npm

CSS-voorbeeld:

/* Body text set */
@use "@minvws/manon/body-text-set";

/* De-emphasized */
@use "@minvws/manon/application-base";

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 {
/* Application background color */
--application-base-background-color: ;
--application-base-text-color: ;

--application-base-tint-1-background-color: ;
--application-base-tint-1-text-color: ;

--application-base-font-family: ;
--application-base-font-size: ;
--application-base-font-weight: ;
--application-base-line-height: ;
--application-base-text-align: ;

--application-base-padding: ;
--application-base-border-radius: ;
--application-base-gap: ;

/* Accent color */
--application-base-accent-color: ;
--application-base-accent-color-text-color: ;

/* Accent color hover */
--application-base-accent-color-hover: ;
--application-base-accent-color-hover-text-color: ;

/* Accent color active */
--application-base-accent-color-active: ;
--application-base-accent-color-active-text-color: ;

/* Accent color focus */
--application-base-accent-color-focus: ;
--application-base-accent-color-focus-text-color: ;

/* Accent color selected */
--application-base-accent-color-selected: ;
--application-base-accent-color-selected-text-color: ;

/* Call to action color */
--cta-background-color: ;
--cta-text-color: ;
}