@nl-design-system-unstable/example-design-tokens v1.0.0-alpha.54
NL Design System design tokens Gemeente Example
These tokens have been obtained by analysing the website of Gemeente Example.
✂ In your own directory: remove the "Getting started" section below!
Getting started with your own NL Design System theme
- Kies een unieke prefix voor jouw organisatie, die je gebruikt voor je npm package, BEM class names, CSS variabelen, etcetera. Wij gebruiken
nl-
, jij kiest iets anders. Gebruik alleen letters en cijfers in de prefix, geen andere tekens zoals het koppelstreepje. Bijvoorbeeld: gemeente Den Haag gebruiktdenhaag
. - Kopieer
proprietary/example-design-tokens/
naarproprietary/prefix-design-tokens
, waarbij jeprefix
vervangt door de prefix die je kiest. - Gebruik "Find and replace" in
proprietary/prefix-design-tokens
, vervang case-sensitiveexample
door jouwprefix
. - Gebruik "Find and replace" in
proprietary/prefix-design-tokens
, vervang case-sensitiveExample Organisation
door jouw de naam van jouw organisatie. - Bewerk
packages/storybook/package.json
, en voeg"@nl-design-system-unstable/prefix-design-tokens": "workspace:*",
toe onder"dependencies"
. Vervang weer deprefix
met je eigen prefix. - Doe
pnpm install
vanuit de root van je project, zodat jouw nieuwe npm package aan de pnpm workspace toegevoegd wordt. - Bewerk
proprietary/prefix-design-tokens/README.md
en pas het aan met je eigen gegevens, voeg een contactpersoon toe. Verwijder de instructies van de template. - Bewerk
proprietary/prefix-design-tokens/package.json
en pas het aan met een link naar je eigen website. - Bewerk
proprietary/prefix-design-tokens/src/package.json
en pas het aan met gegevens van jouw organisatie. - Bewerk
packages/storybook/config/preview.js
a. Voeg de naam van jouw organisatie toe aan de alfabetische lijst met teams, zodat je op alfabetische volgorde te vinden bent in Storybook. b. Voeg eenimport
toe voor de CSS met het thema van jouw organisatie. c. Optioneel: voeg eenimport
toe voor de webfonts voor jouw thema. - Voeg in
proprietary/prefix-design-tokens/src/
jouw design tokens, bijvoorbeeldcolor.tokens.json
. Op de website van NL Design System wordt uitgelegd hoe je een eigen thema kan maken met design tokens. - Maak een Pull Request op GitHub om jouw code toe te voegen aan de NL Design System themes repository.
- Als de code is gemerged in de themes repository, dan zal je eigen thema als npm pakketje na een paar minuten beschikbaar worden via npmjs.com. Dan kun je het thema installeren in jouw project met
npm install --save-dev @nl-design-system-unstable/prefix-design-tokens
.
✂ In your own directory: remove the "Getting started" section above!
6 days ago
16 days ago
19 days ago
27 days ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago