Helsinki Design System uses Lerna for running scripts across the repo as well as versioning and creating releases of the packages. Yarn workspaces is used to manage dependencies. This allows the separate packages to reference each other via symlinks during local development.
- Clone the HDS repository.
git clone https://github.com/City-of-Helsinki/helsinki-design-system.git- Go to the root of the project and install dependencies with
yarn.
cd helsinki-design-system
yarn- Build the design tokens.
yarn build:tokens- Start the development server.
yarn start:coreThis starts the storybook development environment. You can read about how to write storybook stories here. The use of Storybook is recommended for component development.
| Command | Description |
|---|---|
| yarn | Install dependencies and link local packages. |
| yarn build | Builds the package. |
| yarn start | Starts the development environment. |
This project uses hds-design-tokens as a dependency. It provides variables for colors, spacing, typography etc. that are used by the core package. Those variables should be used whenever possible. If you need to update or add new tokens, see here.
Remember to always build the tokens after updating or adding new ones, otherwise they won't be available.
This project uses the Git Feature Branch Workflow. Happy branching!
- PostCSS
- Storybook
- hds-core follows the BEM methodology
Pull requests can be submitted from fork. Read more from here.
git checkout -b <branchname>
git add <file1> <file2> ...
git commit -m "My commit message"git checkout develop
git pull
git checkout <branchname>
git rebase -i develop- Resolve conflicts and continue:
git add <file1> <file2> ...
git rebase --continue- After no conflicts:
git push --force-with-lease(If your remote does not accept your local new branch: git push -u origin HEAD)
- Make a Pull Request at Github website.