Spot klein

Kleurenset met twee hoofdkleuren en twee accentkleuren.

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 kleuren. Voor meer informatie zie het overzicht met instelbare variabelen.
   • Pas de kleuren toe waar nodig. De kleuren kunnen op twee manieren toegepast worden. Door middel van variabelen binnen de CSS of door middel van classes binnen de HTML. Maak gebruik van de CSS-variabelen waar mogelijk en voeg alleen de classes toe in de HTML voor uitzonderingen om de code aanpasbaar en overzichtelijk te houden. Voor meer informatie hierover zie CSS-variabelen gebruiken.

Voorbeelden

Kleurenset voorbeeld

Visueel voorbeeld:

• branding-color-1
• branding-color-2
• branding-color-accent-1
• branding-color-accent-2

CSS-voorbeeld

:root {
  /* Branding color 1 */
  --branding-color-1-background-color: LightSalmon;
  --branding-color-1-text-color: black;

  /* Branding color 2 */
  --branding-color-2-background-color: SeaShell;
  --branding-color-2-text-color: black;

  /* Accent color 1 */
  --branding-color-accent-1-background-color: LightSeaGreen;
  --branding-color-accent-1-text-color: white;

  /* Accent color 2 */
  --branding-color-accent-2-background-color: MediumVioletRed;
  --branding-color-accent-2-text-color: white;
}

Variabele gebruiken binnen een andere variabele

CSS-voorbeeld:

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

Voor meer informatie hierover zie CSS-variabelen gebruiken.

Variabele gebruiken binnen de html op een specifiek element

Waarschuwing: Waar mogelijk is het altijd aan te raden zo min mogelijk classes te gebruiken maar om gebruik te maken van het overerven van CSS. Maar omdat een uitzondering soms nodig is, is het mogelijk om de huistijlkleuren ook direct in de html te kunnen definiëren door middel van classes.

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.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="branding-color-1">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

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/spot-small";

Instelbare variabelen