Rijkshuisstijl Community Componenten - CSS

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 thema "groen" toe te passen:

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

Importeren in een cascade layer (aanbevolen)

Door de CSS van het design systeem in een eigen cascade layer te importeren, wint de CSS van je eigen applicatie altijd van de CSS van het design systeem — ongeacht de specificiteit van de selectors. CSS buiten een layer gaat namelijk altijd vóór CSS binnen een layer.

@import '@rijkshuisstijl-community/design-tokens/dist/index.css' layer(rhc-design-system);
@import '@rijkshuisstijl-community/components-css/dist/index.css' layer(rhc-design-system);

/* Eigen stijlen buiten de layer winnen altijd van de layer hierboven,
   ook met een lagere specificiteit: */
.nl-heading {
  color: red;
}

[!NOTE] Gebruik je ook @rijkshuisstijl-community/components-react? Importeer de componenten dan via het /no-side-effects entrypoint (import { Hero } from '@rijkshuisstijl-community/components-react/no-side-effects';). Het standaard entrypoint laadt de component-CSS zelf als side effect, buiten je layer om — waardoor die alsnog van je eigen stijlen kan winnen.

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