Ga naar hoofdinhoud

Welkom developer 馃憢

Leuk dat je er bent! Of je nu mee wilt bijdragen aan NL Design System of simpelweg even wilt rondneuzen, als developer is dit een goed startpunt.

Op deze pagina leer je:

  • Dat NL Design System uit componenten en thema鈥檚 bestaat.
  • Hoe je componenten en thema鈥檚 kan gebruiken en (door)ontwikkelen.

Wat is NL Design System?

NL Design System werkt met organisaties verspreid over de hele overheid: van gemeenten tot Rijksoverheid. Het is een vanuit de community opgebouwd design system, gebaseerd op design tokens. Componenten worden gebouwd met goede ondersteuning voor a11y en browser support.

Met NL Design system kun je componenten en thema鈥檚 zowel gebruiken, maken als uitbreiden.

Meer informatie over NL Design System

Estafettemodel

Het estafettemodel van NL Design System is een aanpak om samen de beste en meest bruikbare componenten, patronen en richtlijnen te maken.

Meer informatie over het estafettemodel

Samenwerking tussen organisaties

Op de architectuur pagina staat beschreven wat de aanleiding is geweest om NL Design System in het leven te roepen en dat het een goede oplossing is voor meerdere problemen die ontstaan bij het samenwerken van organisaties.

De onderstaande afbeelding geeft schematisch weer hoe een organisatie NL Design System kan gebruiken voor het bouwen van webpagina鈥檚 en tegelijkertijd samen kan werken met andere organisaties.

schematische uitleg hoe organisaties samen kunnen werken

Zoom hier in op Organisatie A. Ze hebben een webpagina gebouwd op basis van componenten uit meerdere stappen in het Estafettemodel (community, candidate en hall-of-fame).

Op basis van Start thema hebben ze Thema A gemaakt. Doordat ze hun design keuzes vastgelegd hebben in Thema A kan de huisstijl van Organisatie A toegepast worden op alle componenten die zij gebruiken, 贸贸k de community component van Organisatie B.

Componenten

Componenten worden ontwikkeld in verschillende stappen aan de hand van het estafettemodel.

Tijdens elke stap van het estafettemodel kunnen componenten gebruikt worden. Je hoeft dus niet te wachten tot een component hall-of-fame is voordat je het kan gebruiken. Ook is het mogelijk om componenten uit te breiden. Bij het gebruiken van een community component is het wel het geval dat de naam van de organisatie in de component verwerkt is.

De componenten zijn in de basis gebaseerd op HTML, CSS en Javascript, maar kunnen daarnaast ook gebouwd worden met populaire front-end frameworks en door middel van web components.

Je kunt de componenten terugvinden op de componenten pagina

Als je overweegt om een component te gebruiken voor jouw project kun je refereren naar componenten kiezen

Uiteraard is het mogelijk om zelf een component te maken

Thema鈥檚

Componenten worden gevoed door de design tokens die in een thema gedefinieerd worden. Je kan een thema zien als de huisstijl van de organisatie waar je voor werkt. Dit wordt goed ge茂llustreerd op de zelf een thema maken pagina voor designers met de volgende afbeelding: Drie dezelfde interfaces. E茅n zonder stijling. Twee met een eigen huisstijl

Design tokens

Wil je een nieuw thema introduceren? Ga dan verder op de pagina thema maken

Zelf een pagina bouwen met NL Design System

Als je zelf een pagina wilt bouwen met NL Design System dan kun je zelf experimenteren met de beschikbare componenten in jouw favoriete web framework. Als een component niet ge茂mplementeerd is in het framework dat je zoekt, dan kun je altijd nog de HTML/CSS implementatie gebruiken.

Als je snel iets wilt uitproberen zonder een specifiek framework te gebruiken kun je het beste kijken naar NL Design System gebruiken zonder front-end framework.

Github

Toegang tot Github is nodig om te werken aan bestaande repositories binnen nl-design-system. Neem hiervoor contact op met het kernteam. Het is mogelijk om jezelf alvast toe te voegen door een pullrequest aan te maken op basis van de instructies.

Github

Contactmogelijkheden