Rijkshuisstijl Community Componenten

Direct aan de slag met CSS | React | Web Components | Twig

---

Dit project wordt niet gesteund door het Ministerie van Algemene Zaken.

Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de centrale overheid van Nederland.

Dit project maakt deel uit van een samenwerkingsverband om NL Design System-componenten te gebruiken voor projecten die moeten voldoen aan de Rijkshuisstijl. Organisaties van de centrale overheid van Nederland ( bijvoorbeeld: Belastingdienst, DUO, Logius, SVB) en degenen die door hen zijn ingehuurd voor het ontwikkelen van websites en apps, kunnen via dit project samenwerken.

Voordat je begint

Node

In dit project wordt Node.js versie 22.13 gebruikt. Dit project bevat een .nvmrc bestand en helpt je met het installeren van de juiste versie met behulp van nvm.

• Als je nvm nog niet hebt, installeer nvm.

Zodra je nvm hebt geïnstalleerd, run je het commando:

nvm use

Als je de juiste versie nog niet hebt, wordt gevraagd om deze te installeren door middel van nvm install. Als de juiste versie al is geïnstalleerd, of nadat hij is geïnstalleerd, wordt hij ingesteld als de huidige versie.

SCSS/SASS

De componenten gebruiken scss, zorg dat jouw project scss-bestanden kan verwerken.

Aan de slag

De componenten van de Rijkshuisstijl Community zijn te gebruiken met en zonder framework. Bekijk de README van elke package voor informatie over implementatie.

Package	Purpose
components-css	Hier kunnen CSS-componenten toegevoegd worden die nog niet bestaan in de NL Design System-community.
components-react	Optioneel voor het toevoegen van een React-wrapper aan een CSS-component als die nog niet bestaat.
web-components	Optioneel voor het toevoegen van een Web Component wrapper aan een CSS-component als die nog niet bestaat.
components-twig	Optioneel voor het toevoegen van een Twig-wrapper aan een CSS-component als die nog niet bestaat.
font	Dit npm pakketje met fonts kun je gebruiken als alternatief op de officiële Rijkshuisstijl fonts, voor situaties waar je geen toestemming hebt om de officiële fonts te gebruiken.

Licentie

Dit project bevat zowel eigen als vrije en open-source software die wordt gelicentieerd onder de European Union Public License (EUPL) v1.2.

Lees de NOTICE file voor informatie over eigen assets in deze repository.

Logo en stijlgids

Copyright geldt voor het Rijkshuisstijl-logo en merkidentiteit. Gebruik hiervan is strikt verboden, behalve voor het ontwikkelen van websites en apps voor de Rijksoverheid.

Fonts

De lettertypen voor de Rijkshuisstijl zijn speciaal ontworpen voor de Rijksoverheid en zijn niet open source. Gebruik tot toestemming, systeemlettertypen zoals Arial, Verdana of Times New Roman of het @rijkshuisstijl-community/font.

Open source varianten

Gebruik tijdens ontwikkeling placeholder varianten voor assets die een licentie vereisen, zoals logo’s, lettertypen en iconen.

Lettertypen

Bekijk de packages/font/README.md voor de meerdere manieren om de lettertypen te installeren voor jouw project.

Logo

Omdat buiten officiële Rijksoverheids-media het logo van de Rijksoverheid niet mag worden gebruik, wordt binnen dit project standaard het icoon met id nederland-map gebruiken, met een witte achtergrond.

Icons

Binnen dit project zijn de iconen standaard afkomstig uit de open source Tabler Icons icon set of handmatig geïmplementeerd door contributors van de Rijkshuisstijl Community. Er kunnen eigen iconen worden toegevoegd aan de standaard icon set, zie hiervoor instructies op de storybook pagina van de Icon component.

Toestemming

Wanneer je een website voor de Nederlandse overheid ontwikkelt, kun je toestemming aanvragen door contact op te nemen met het Ministerie van Algemene Zaken.

Gedragscode

We beloven op een manier te handelen die bijdraagt aan een open, gastvrije, diverse, inclusieve en gezonde gemeenschap. Lees onze gedragscode als je dat nog niet hebt gedaan.

Ontwikkeling

Dit project is gebaseerd op de NL Design System-template en kan worden gebruikt door Rijksoverheidsorganisaties die het NL Design System willen gebruiken en willen samenwerken aan extra componenten, een gedeeld thema en storybook-sjablonen.

NodeJS and pnpm

We gebruiken NodeJS om onze JavaScript-pakketten te beheren. Controleer in je terminal met node -v of je NodeJS hebt geïnstalleerd. Installeer NodeJS anders via nodejs.org.

NodeJS bevat npm, maar we gebruiken pnpm voor stabiele pakketresolutie. Controleer of je pnpm hebt door pnpm -v te typen. Installeer het met npm install -g pnpm als dat niet zo is.

Handige commando's

Alle commando’s worden uitgevoerd vanuit de root van het project, in een terminal:

Command	Action
pnpm install	Installeert dependencies.
pnpm run storybook	Start de lokale ontwikkelserver op localhost:6006.
pnpm run build	Bouw je productie-site naar ./dist/.
pnpm run lint	Voert de lint-scripts uit om de code aan de projectstandaarden te voldoen.
pnpm run lint-fix	Voert lint-scripts uit en herstelt automatisch fouten mits die gevonden zijn.

Vanuitpackages/components-react krijg je een gedetailleerder overzicht van tests:

Command	Action
pnpm run test	Voert alle test suites uit.

Proprietary

Branding, lettertypen en andere assets moeten vaak niet deel uitmaken van de EUPL-licentie. Door deze in de proprietary pakketten toe te voegen, worden ze juridisch uitgesloten op basis van de LICENSE en NOTICE-bestanden. Elke Rijksoverheidsorganisatie die met een NL Design System-thema werkt, kan hier hun thema als pakket toevoegen.

Wie werkt er aan dit project?

Dit project is een samenwerking tussen frontend-ontwikkelaars, ontwerpers en enthousiastelingen uit diverse velden binnen de IT-sector en overheidsorganisaties.

Links

• Bug gevonden of code bekijken? Bezoek onze GitHub repository.

• Benieuwd naar onze voortgang? Bekijk ons huidige werk op het Sprint Board.

• Blijf in contact met de community! Word lid van de Code for NL Slack en join het #nl-design-system kanaal om samen te werken met de community.