The design system has two primary parts, the UI component library /lib and the documentation site /docs. The following guidelines will help you set up a development environment so that you can update both.
- Node.js 18.x (see Node Version Manager)
- Yarn >=1.22.22
If you experience any problems with the setup below, see if you can find a similar issue in Tips and troubleshooting.
At first, fork this repository.
Then, change to the directory where you cloned it:
cd kolibri-design-systemInstall the dependencies using yarn:
yarn installFinally, run the development server:
yarn devThis command will start a documentation development server at http://localhost:4000/. It will also run a linter and auto-formatter.
There are few other commands available:
yarn dev-only # launch just the dev server without the linter and auto-formatter
yarn lint-fix # run the linter and auto-formatter once
yarn lint-watch # run the linter in watch mode, without the auto-formatterYou're now ready to code!
- If you experienced troubles with the setup above or would like to get some development tips, you can visit Tips and troubleshooting.
- Our components are build in Vue 2. If you're not familiar with this framework, refer to Vue 2 documentation.
- If you'd like to update the component library, continue to How to update the component library.
The guidelines referenced above should be sufficient for the most common tasks. There are a few additional developer documentation pages available. However, these pages contain information that is more internal in nature or related to specialized tasks: