Een flexibel en toegankelijk design framework voor semantische HTML.
De volledige documentatie is te vinden op https://minvws.github.io/nl-rdo-manon. Deze wordt gegenereerd op basis van de docs directory binnen deze repo.
For English, see English.
Manon is een design framework dat de volgende principes hanteert:
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.
Manon streeft ernaar om de toegankelijkheid van webapplicaties te verbeteren door het bieden van toegankelijke componenten die voldoen aan de WCAG-richtlijnen.
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.
Naast dat Manon een aantal thema's aanbiedt, kun je ook je eigen thema samenstellen. Elk thema kan de variabelen van de componenten overschrijven om de gewenste stijl te bereiken.
Om Manon in je project te gebruiken, kun je kiezen uit de volgende installatiemethoden:
Download Manon
en link het manon-themes/dist/manon.min.css in de <head> van je
HTML-bestand:
<link rel="stylesheet" href="path/to/manon.min.css" />Je kunt ook een thema van Manon gebruiken via
jsDelivr CDN. Voeg de
volgende regel toe aan de <head> van je HTML-bestand:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@minvws/manon-themes/dist/manon.min.css"
/>npm install @minvws/manon @minvws/manon-themesJe kunt dan een thema van Manon en de volledige componenten bibliotheek importeren in je Sass-bestand:
@use "@minvws/manon-themes/icore-open";
@use "@minvws/manon/components/bundles/all";Als je niet de volledige set wilt gebruiken dan heb je de mogelijkheid om specifieke componenten te importeren:
@use "@minvws/manon/components/breadcrumb-bar";
@use "@minvws/manon/components/checkbox";Lees meer informatie in de installatie documentatie over het gebruik van Manon met Sass in je project voor meer maatwerkopties.
Je bent nu klaar om de componenten in je HTML te gebruiken. Volg de instructies in de Componentenbibliotheek 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 volgen om te leren hoe je de componenten op een meer gestructureerde manier kunt gebruiken.
Daarnaast hebben we enkele voorbeeldimplementaties geleverd in verschillende frameworks.
Hieronder staan enkele projecten die gemaakt zijn met Manon:
| Project | Links |
|---|---|
| Dus-i Burgerportaal | 🧑💻 https://github.com/minvws/nl-rdo-dusi-portal-web-frontend |
| GF-Modules | 🌐 https://irealisatie.nl/projecten/gf-modules 🧑💻 https://github.com/minvws/gfmodules-coordination |
| iCore Open Theme for Sphinx | 🧑💻 https://github.com/minvws/manon-icore-open-sphinx-theme |
| iRealisatie Website | 🌐 https://irealisatie.nl |
| Mijn Gezondheidsoverzicht | 🌐 https://irealisatie.nl/projecten/mijn-gezondheidsoverzicht |
| OpenKAT | 🌐 https://openkat.nl 🧑💻 https://github.com/SSC-ICT-Innovatie/nl-kat-coordination |
| ZaakVolgSysteem | 🌐 https://irealisatie.nl/projecten/zaakvolgsysteem |
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.
Deze repository volgt de
REUSE Specification v3.2. Zie
REUSE.toml, LICENSES/ en de individuele
*.license-bestanden voor copyright- en licentie-informatie.