@minvws/manon
v18.2.0
Published
<p align="center"> <a href="https://minvws.github.io/nl-rdo-manon" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/minvws/nl-rdo-manon/main/docs/src/img/logo.svg" /> <sour
Keywords
Readme
📚 Documentatie
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.
🙋 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, kun je ook je eigen thema samenstellen. Elk thema kan de variabelen van de componenten overschrijven om de gewenste stijl te bereiken.
🚀 Aan de slag
Om Manon in je project te gebruiken, kun je kiezen uit de volgende installatiemethoden:
Handmatige installatie
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" />Installatie via CDN
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"
/>Installatie via npm
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.
Klaar om te gebruiken
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.
🏗️ Projecten gebouwd met Manon
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 |
🌱 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. Zie
REUSE.toml, LICENSES/ en de individuele
*.license-bestanden voor copyright- en licentie-informatie.