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:

  • Wat NL Design System is en hoe organisaties samen componenten en thema鈥檚 ontwikkelen.
  • Hoe je componenten en thema鈥檚 kunt gebruiken en (door)ontwikkelen in je eigen project.

Wat is NL Design System?

NL Design System werkt met organisaties verspreid over de hele overheid: van gemeenten tot de 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鈥檚 gebruiken, maken en 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 architectuurpagina staat beschreven wat de aanleiding is geweest om NL Design System in het leven te roepen en hoe het een oplossing biedt 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 kan samenwerken met andere organisaties.

Schematische uitleg hoe organisaties samen kunnen werken

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

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

Componenten

Componenten zijn in de basis gebaseerd op HTML, CSS en JavaScript, maar kunnen daarnaast ook worden gebouwd met populaire front-end frameworks en met web components.

Componenten worden ontwikkeld in verschillende stappen aan de hand van het estafettemodel.
Je kunt de componenten terugvinden op de componentenpagina.

Tijdens elke stap van het estafettemodel zijn componenten bruikbaar. Je hoeft dus niet te wachten tot een component hall-of-fame status heeft bereikt, voordat je deze kunt gebruiken. Ook is het mogelijk om componenten uit te breiden.

info

Bij community componenten is de naam van de organisatie in de component verwerkt.

Updates doorvoeren

Het is niet verplicht om een community component direct te updaten naar de nieuwste versie of deze te vervangen door een candidate component of hall-of-fame component. Belangrijke wijzigingen kunnen worden toegepast op alle versies waarin een component zich bevindt.

Als ontwikkelaar houd je zelf de regie over wanneer je updates uitvoert en kun je de keuzes maken die het beste bij jouw project passen.

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

Uiteraard is het ook mogelijk om zelf een component te maken.

Thema鈥檚

Componenten worden gevoed door de design tokens die in een thema zijn gedefinieerd. Je kunt een thema zien als de huisstijl van de organisatie waarvoor je werkt. Dit wordt goed ge茂llustreerd op de pagina zelf een thema maken voor designers, met de volgende afbeelding:

Drie dezelfde interfaces. E茅n zonder stijling. Twee met een eigen huisstijl

Een thema zorgt ervoor dat dezelfde componenten op een pagina er voor jouw organisatie herkenbaar uitzien.

Design tokens

Design keuzes worden vastgelegd in design tokens. Voor developers is het belangrijk om de design tokens te begrijpen en om conventies aan te houden.

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, kun je experimenteren met de beschikbare componenten in je favoriete front-end framework. Als een component niet is ge茂mplementeerd in het framework dat je gebruikt, kun je altijd de HTML- en CSS-implementatie gebruiken.

Als je snel iets wilt uitproberen zonder een specifiek front-end 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 alvast een pull request aan te maken op basis van de instructies. Deze moet daarna worden goedgekeurd.

Hoe en waarom NL Design System GitHub gebruikt

Voor kleinere bijdragen, zoals documentatie of kleine verbeteringen, is het meestal voldoende om direct een pull request te openen via een fork.

Contactmogelijkheden