Let op: Aan deze handleiding wordt nog gewerkt.
Welkom bij Manon
Manon is een variabel en instelbaar front-end framework. Een Open Source-project ontwikkeld door het Ministerie van Volksgezondheid, Welzijn en Sport.
Ontstaan van Manon
Tijdens de vaccinatiecampagne werden er in korte tijd veel websites gelanceerd en in beheer genomen. Om onnodige herhalingen te voorkomen en om snel volgens de rijkshuisstijl te kunnen bouwen is door het Ministerie van VWS in korte tijd een framework gebouwd.
Door vanuit een centraal punt te werken konden problemen direct voor alle websites tegelijkertijd opgelost worden.
Om dit pakket aan te kunnen bieden aan een breder publiek is Manon herschreven. Hierbij is Manon instelbaar geworden zodat het werkt met een huisstijl naar keuze. Daarnaast is Manon nu zo geschreven dat alleen benodigde code ingeladen kan worden. Deze handleiding helpt je met het gebruik ervan.
Wat is Manon
Manon biedt een bibliotheek met componenten. Deze componenten bevatten voorbeeld-HTML en worden geleverd met hun eigen CSS en JavaScript. Bekijk alle componenten in de componentenbibliotheek. Installeer Manon voor je eigen project met behulp van deze instructies.
Gedachte achter Manon
Uitgangspunt bij het bouwen van een website is de scheiding tussen content, markup, beeld, CSS en eventueel javascript. Hoe strikter deze gescheiden zijn, des te eenvoudiger is het om een toegankelijke en goed te beheren website te bouwen. Het is niet eenvoudig om een goed framework te vinden waarin dit consequent wordt toegepast. Hiervoor is 'Manon' geschreven, dat een strikte scheiding hanteert tussen de content, markup en styles.
Manon gebruiken
Snel met veel vrijheid stylen
Alle componenten zijn instelbaar. Elk component heeft bijbehorende variabelen die gebruikt kunnen worden om eigen stijlkeuzes in te stellen.
Componenten staan zo ingesteld dat ze zoveel mogelijk overerven van hogergelegen elementen. Zo wordt het invoeren van een nieuwe huisstijl zo efficient mogelijk gemaakt en biedt het ruimte voor creatieve vrijheid en specifieke uitzonderingen.
Gebruik alleen wat je nodig hebt
Benut enkel de CSS die nodig is binnen jouw project. Dit kan een enkel component zijn of een hele set. Laad de gewenste componenten in en gebruik de bijbehorende HTML en JavaScript voor het gewenste resultaat.
In de componentenbibliotheek vind je het volledige overzicht met beschikbare componenten.
Handige helpers
Voor bekende uitzonderingen bevat Manon "helper-classes". Denk bijvoorbeeld aan die ene paragraaf die gecentreerd in het ontwerp staat. Terwijl de overige teksten links uitgelijnd staan. Deze classes kunnen gebruikt worden om een visuele uitzondering snel en efficient toe te passen binnen het project waar nodig.