@dso-toolkit/react v62.21.0
DSO Toolkit - Design System van het Digitaal Stelsel Omgevingswet (DSO)
De DSO Toolkit bestaat uit documentatie en een stijlgids. Daarnaast worden er twee implementaties geleverd: CSS en Web Components. De Web Components krijgen voor Angular en React wrappers, zie issue #915.
De deliverables van de DSO Toolkit:
- Handleiding: Een handleiding voor elke versie op https://www.dso-toolkit.nl/
- CDN: Een CDN op https://cdn.dso-toolkit.nl/, voor documentatie zie verderop in deze README
- NPM package
@dso-toolkit/styling
: Een incomplete CSS implementatie van de DSO stijlset geschreven in SCSS - NPM package
dso-toolkit
: De handleiding en complete CSS implementatie van de DSO stijlset.
We zijn bezig met het verhuizen van de styling van dso-toolkit
naar @dso-toolkit/styling
. Zodra die verhuizing is afgerond zal dso-toolkit
worden deprecated en moeten implementaties overstappen naar @dso-toolkit/styling
. De componenten zoals die worden aangeboden op https://www.dso-toolkit.nl/ blijven functioneren. Voor meer informatie zie #827
Getting started
Stable releases can be found on the GitHub Releases page.
NPM registry
npm install dso-toolkit --save-dev
- Add
node_modules/dso-toolkit/libs
andnode_modules
as include paths to your SASS compiler/wrapper (See #105 for more information) - Bundle
/node_modules/dso-toolkit/src/dso.scss
in your build process.
The Web Components are not yet available as NPM package, see #827 and #885. In the meantime you could use the <script>
-tag mentioned below.
CDN
The toolkit and component library are distributed to dso-toolkit.nl. Use the table below to resolve the branch/channel to the base url:
branch | channel | url |
---|---|---|
master | stable | https://cdn.dso-toolkit.nl/master/ |
tags only | releases | https://cdn.dso-toolkit.nl/VERSION/ |
The same goes for the component library:
branch | channel | url |
---|---|---|
master | stable | https://www.dso-toolkit.nl/master/ |
tags only | releases | https://www.dso-toolkit.nl/VERSION/ |
<link rel="stylesheet" href="https://cdn.dso-toolkit.nl/[master|VERSION]/styles/dso.css" />
For Web Components:
<script type="module" src="https://cdn.dso-toolkit.nl/[master|VERSION]/core/dso-toolkit.esm.js"></script>
<script nomodule src="https://cdn.dso-toolkit.nl/[master|VERSION]/core/dso-toolkit.js"></script>
The referenced scripts are very small: Only the actually used Web Components are lazy loaded. For more information: https://stenciljs.com/docs/distribution
Develop or mockups
To work on the DSO Toolkit using components and variants or create mockups of pages, forms or components you need Node 12 and Yarn 2.
Either install Yarn with
npm install --global yarn
or use Yarn with npx
:
npx yarn <<<my commands here>>>
git clone git@github.com:dso-toolkit/dso-toolkit.git
cd dso-toolkit
yarn install
yarn start
A local webserver is started at http://localhost:3000/. See the Fractal guide on how to develop components. See CONTRIBUTING.md on how to contribute.
Requirements
Node 12. For development on the DSO Toolkit you also need Yarn.
Dependencies
The DSO Toolkit and Component Library uses
npm
as the registry for node packagesyarn
for package managementgulp
for build automationnode-sass
to compile sass to cssfractal
to document the toolkityaml
to configure fractal components
Further reading
12 days ago
15 days ago
17 days ago
26 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months 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
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
6 months ago
5 months ago
6 months ago
8 months ago
8 months ago
10 months ago
7 months ago
6 months ago
9 months ago
6 months ago
6 months ago
9 months ago
10 months ago
6 months ago
6 months ago
9 months ago
7 months ago
10 months ago
6 months ago
7 months ago
8 months ago
7 months ago
9 months ago
8 months ago
8 months ago
1 year ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago