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.
The project requires Node 18.X as the runtime and Yarn >= 1.22.X as the package manager. We make use of Volta to manage the same automatically. Please make sure you have volta installed and your shell configured to use volta.
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: