A flexible and accessible design framework for semantic HTML.
The documentation is available at https://minvws.github.io/nl-rdo-manon. It is generated from the docs directory on this repo.
For Dutch, see Dutch.
Manon is a design framework based on the following principles:
Manon prioritizes styling based on HTML structure, leading to clean and maintainable code. This allows for efficient visual adjustments with minimal HTML changes.
Manon strives to improve the accessibility of web applications by providing accessible components that comply with the WCAG guidelines.
Use only what you need. Manon consists of individual components that can be imported separately, so you don't have to use the entire set.
In addition to offering a number of themes, Manon also allows you to create your own. Each theme can override the components’ variables to achieve the desired style.
When you want to use Manon in your project, you have several options for installation:
Download Manon
and link manon-themes/dist/manon.min.css in the <head> of your HTML file:
<link rel="stylesheet" href="path/to/manon.min.css" />You can also use a Manon theme via the
jsDelivr CDN. Add the
following line to the <head> of your HTML file:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@minvws/manon-themes/dist/manon.min.css"
/>npm install @minvws/manon @minvws/manon-themesYou can then import a theme from Manon and the complete component library into your Sass file:
@use "@minvws/manon-themes/icore-open";
@use "@minvws/manon/components/bundles/all";If you don’t want to use the full set, you have the option to import specific components instead:
@use "@minvws/manon/components/breadcrumb-bar";
@use "@minvws/manon/components/checkbox";Read more in the installation documentation about using Manon with Sass in your project for more customization options.
You're now ready to use the components in your HTML. Follow the instructions in the Component library on how to use the components in your HTML. Each component has its own page with examples and code snippets.
You can also follow the tutorial to learn how to use the components in a more structured way.
Additionally, we've provided some example implementations in a few different frameworks.
Here are some projects that have been built using 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 emerged from the need for a flexible design framework during the vaccination campaign, where many websites had to be launched quickly under strict branding and accessibility requirements from the Dutch government. The Ministry of VWS developed this framework to simplify the building and management of government-style compliant websites. This version has been adapted for broader use.
This repository follows the
REUSE Specification v3.2. Please see
REUSE.toml, LICENSES/ and the individual
*.license files for copyright and license information.