Documentatie

Manon is een modulair framework. Dat betekent dat je zelf kiest welke componenten je gebruikt en welk thema je toepast.

Snel aan de slag

Voor het installeren van Manon is npm nodig.

  1. Installeer Manon: 
    npm install @minvws/manon @minvws/manon-themes

  2. Bereid je project voor om Sass-bestanden te ondersteunen, als het dat niet al doet.

    • Installeer dart-sass versie 1.23 of nieuwer: 
      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 tool, kies er dan een of gebruik de Sass command-line interface.
    • Let op: Manon werkt niet met node-sass.
  3. Importeer in de .sass of .scss van je project de gewenste componenten van Manon en een thema: 
    @use "@minvws/manon/body-text-set";
@use "@minvws/manon/headings-base-set";
@use "@minvws/manon/application-base";
@use "@minvws/manon/p";
// et cetera...

@use "@minvws/manon-themes/basic-bold";
  4. Afhankelijk van welke build tools je project gebruikt, kan het nodig zijn om het basepath van de url()s van de lettertypes aan te passen. Voor webpack 4 is het bijvoorbeeld nodig om de paden te prefixen met een ~. Dit kan door de $font-path variabele mee te geven: 
    @use "@minvws/manon-themes/basic-bold" with (
  $font-path: "~@minvws/manon-themes/basic-bold/fonts"
);
  5. Voeg de HTML toe. Volg hiervoor de instructies in de Componentenbibliotheek.

Meer instructies

Manon installeren voor development

Manon maakt gebruik van git en de package manager pnpm.

  1. Download Manon: 
    git clone https://github.com/minvws/nl-rdo-manon.git
cd nl-rdo-manon
  2. Installeer de dependencies: 
    pnpm install
  3. Bouw en open de documentatie:
    • Wil je interactief aan Manon en/of de documentatie werken?
    • Wil je een productie-versie van de documentatie bouwen?
      • Draai een build: 
        cd docs
pnpm run build
      • Het resultaat is te vinden in de folder docs/build
      • Gebruik pnpm preview om de gebouwde documentatie lokaal in te zien