Snelstart

Stappenplan voor het implementeren van Manon.

Bereid je project voor om @minvws npm packages te installeren uit de GitHub Packages registry.
- Voeg een .npmrc-bestand toe aan je project, als die niet al bestaat. Voeg deze regel toe aan het bestand:
```
@minvws:registry=https://npm.pkg.github.com
```
- Om je te authenticeren voor GitHub Packages heb je een "personal access token (classic)" met de read:packages scope node. Je kan een nieuwe access token (read:packages) genereren of meer lezen over het beheren van je personal access tokens. Bewaar de token voor de volgende stap.
- Voeg een .npmrc-bestand toe aan je home directory (~/.npmrc), als die niet al bestaat. Voeg deze regel toe aan het bestand:
```
//npm.pkg.github.com/:_authToken=TOKEN
```
  Vervang hierbij TOKEN door het token uit de vorige stap.
Bereid je project voor om Sass-bestanden te ondersteunen, als het dat niet al doet.
```
npm install sass
```
Configureer de build tool van je project om Sass te ondersteunen. Raadpleeg hiervoor de documentatie van je build tool. Gebruikt het project (nog) geen build tools, kies er dan een of gebruik de sass cli.
Let op: voor Manon is minimaal dart-sass versie 1.23 nodig. Manon werkt niet met node-sass.

Installeer de laatste versies van Manon en dit thema:

npm install @minvws/manon @minvws/nl-rdo-rijksoverheid-ui-theme

Kies welke Manon-componenten je nodig hebt, en importeer die in je project.
- Het kan handig zijn deze imports in een apart bestand te verzamelen, bijvoorbeeld _manon.scss, zodat je ze in één keer kan importeren:
```
/* scss/main.scss */
@use "manon";
```
- Als je niet zeker weet welke componenten je nodig hebt, kan het helpen om het bestand scss/manon/_index.scss uit het thema als basis te nemen. Dit bestand importeert alle Manon-componenten die door het thema ondersteund worden, en kan als volgt uit de node_modules gekopiëerd worden:
```
cp node_modules/@minvws/nl-rdo-rijksoverheid-ui-theme/scss/manon/_index.scss scss/_manon.scss
```
Importeer het thema en de thema-specifieke componenten in je project:
```
/* scss/main.scss */
@use "manon";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/components";
```
- De thema-specifieke componenten hebben hun eigen CSS. Als de CSS van één of meer van deze componenten conflicteert met andere CSS in het project, is het ook mogelijk om individuele componenten te importeren uit de map scss/components/. Bijvoorbeeld:
```
/* scss/main.scss */
@use "manon";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/scss/components/logo";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/scss/components/ro-icons";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/scss/components/radio";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/scss/components/checkbox";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/scss/components/input";
```
  Zie scss/components/_index.scss voor een volledige lijst van alle componenten.
- Kies eventueel een andere communicatiekleur. De rijkshuisstijl heeft 17 communicatiekleuren. Om historische redenen is de standaard-kleur van dit thema robijnrood in plaats van het gebruikelijke blauw. Zie Communicatiekleuren voor een overzicht van de beschikbare kleuren. Gebruik de $brand-color-variabele om een andere kleur te kiezen:
```
@use "@minvws/nl-rdo-rijksoverheid-ui-theme" with (
  $brand-color: "mint-green"
);
```
- Afhankelijk van welke build tool je project gebruikt, kan het nodig zijn om het basispad van de url()s van de lettertypes en afbeeldingen aan te passen. Voor webpack 4 is het bijvoorbeeld nodig om de paden te prefixen met een ~. Dit kan door de $font-path en $img-path variabelen mee te geven:
```
@use "@minvws/nl-rdo-rijksoverheid-ui-theme" with (
  $font-path: "~@minvws/nl-rdo-rijksoverheid-ui-theme/fonts",
  $img-path: "~@minvws/nl-rdo-rijksoverheid-ui-theme/img"
);
```
Voeg de HTML toe.
- Gebruik een van de voorbeeldpagina's voor het opzetten van de HTML.