Rijkshuisstijl Community Componenten - CSS

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.

Deze package is onderdeel van het Rijkshuisstijl Community project.

[!NOTE] De componenten zijn ook beschikbaar in individuele packages als er alleen maar een deel nodig zijn

Aan de slag met CSS-componenten

Om de CSS-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het components-css npm package.

npm install @rijkshuisstijl-community/components-css

Dit installeert de CSS-componenten. Om deze componenten te gebruiken, moet je het thema toepassen in de volgende stap.

Thema toepassen

Om de Rijkshuisstijl aan je project toe te voegen, installeer je het design-tokens npm package.

npm install @rijkshuisstijl-community/design-tokens

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het index.css-bestand uit de dist map van het pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: rhc-theme.

@import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
@import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren

Thema wijzigen

Om een ander thema toe te passen moet je het importeren van import '@rijkshuisstijl-community/design-tokens/dist/{thema}/index.css'; en de class aanpassen naar het desbetreffende thema. Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:

@import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css'; // design tokens importeren
@import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren

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