From 006a4f5004550da360d03cafaf1edeaa5909f368 Mon Sep 17 00:00:00 2001 From: Jan Klopper Date: Fri, 7 Nov 2025 11:55:59 +0100 Subject: [PATCH] Add documentation for Manon design framework Added documentation for the Manon design framework, covering principles, installation methods, and usage instructions. --- docs/technologies/manon | 116 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 docs/technologies/manon diff --git a/docs/technologies/manon b/docs/technologies/manon new file mode 100644 index 00000000..8d3a00be --- /dev/null +++ b/docs/technologies/manon @@ -0,0 +1,116 @@ +## 🙋 Wat is Manon? + +Manon is een design framework dat de volgende principes hanteert: + +### ✨ "Classless" waar mogelijk + +Manon geeft de voorkeur aan styling op basis van de HTML-structuur, wat zorgt +voor overzichtelijke en goed onderhoudbare code. Dit maakt efficiënte visuele +aanpassingen mogelijk met minimale HTML-wijzigingen. + +### 🫶 Toegankelijkheid + +Manon streeft ernaar om de toegankelijkheid van webapplicaties te verbeteren +door het bieden van toegankelijke componenten die voldoen aan de +WCAG-richtlijnen. + +### 📦 Zo klein mogelijk + +Gebruik alleen wat je nodig hebt. Manon bestaat uit losse componenten die +afzonderlijk geïmporteerd kunnen worden, zodat je niet de hele set hoeft te +gebruiken. + +### 🎨 Thema's + +Naast dat Manon een aantal thema's aanbiedt (waaronder ook een aantal +rijkshuisstijl varianten), kun je ook je eigen thema samenstellen. Elk +thema kan de variabelen van de componenten overschrijven om de gewenste +stijl te bereiken. + +## 📚 Documentatie + +De volledige documentatie is te vinden op +. Deze wordt gegenereerd op basis van de +[docs](https://minvws.github.io/nl-rdo-manon/docs) directory binnen deze repo. + +> For English, see [English](https://github.com/minvws/nl-rdo-manon/blob/main/README.en.md). + +## 🚀 Aan de slag + +### Handmatige installatie + +[Download Manon](https://github.com/minvws/nl-rdo-manon/archive/refs/heads/main.zip) +en link het `manon-themes/dist/manon.min.css` in de `` van je +HTML-bestand: + +```html + +``` + +### Installatie via CDN + +Je kunt ook een thema van Manon gebruiken via +[jsDelivr CDN](https://cdn.jsdelivr.net/npm/@minvws/manon-themes/). Voeg de +volgende regel toe aan de `` van je HTML-bestand: + +```html + +``` + +### Installatie via npm + +```console +npm install @minvws/manon @minvws/manon-themes +``` + +Je kunt dan een thema van Manon importeren in je Sass-bestand: + +```scss +@use "@minvws/manon-themes/icore-open"; +``` + +Je hebt dan de mogelijkheid om specifieke componenten te importeren indien je +niet de volledige set nodig hebt: + +```scss +@use "@minvws/manon/components/hero"; +``` + +Lees meer informatie in de +[installatie documentatie](https://minvws.github.io/nl-rdo-manon/getting-started/installation) +over het gebruik van Manon met Sass in je project voor meer maatwerkopties. + +### Klaar om te gebruiken + +Je bent nu klaar om de componenten in je HTML te gebruiken. Volg de instructies +in de [Componentenbibliotheek](https://minvws.github.io/nl-rdo-manon/components) +over hoe je de componenten in je HTML kunt gebruiken. Elke component heeft zijn +eigen pagina met voorbeelden en codefragmenten. + +Je kunt ook de +[tutorial](https://minvws.github.io/nl-rdo-manon/getting-started/tutorial) +volgen om te leren hoe je de componenten op een meer gestructureerde manier kunt +gebruiken. + +Daarnaast hebben we +[enkele voorbeeldimplementaties](https://github.com/minvws/nl-rdo-manon/tree/main/examples/) +geleverd in verschillende frameworks. + +## 🌱 Oorsprong + +Manon is ontstaan uit de behoefte aan een flexibel design framework voor de +vaccinatiecampagne, waarbij snel veel websites moesten worden gelanceerd onder +strikte huisstijl- en toegankelijkheidsvoorschriften van de rijksoverheid. Het +Ministerie van VWS heeft dit framework ontwikkeld om het bouwen en beheren van +rijkshuisstijl conforme websites te vereenvoudigen. Deze versie is aangepast +voor breder gebruik. + +## 📄 Licentie + +Deze repository volgt de +[REUSE Specification v3.2](https://reuse.software/spec/). Zie +[REUSE.toml](https://github.com/minvws/nl-rdo-manon/blob/main//REUSE.toml), [LICENSES/](https://github.com/minvws/nl-rdo-manon/blob/main//LICENSES/) en de individuele +`*.license`-bestanden voor copyright- en licentie-informatie.