kickstartDS

kickstartDS is an Open Source Design System starter and UI toolkit for building up your very own Design System. This in turn enables you, and your team, to build brand-compliant websites and apps super efficiently. All while using core web technologies — HTML, CSS, and JavaScript — and best practices.

Goals

Great components as the baseline
Enable flexible + easy design application
First-class React templating support
Work with "classic" backend environments, too
Jamstack & composable integrations

Documentation

We started work on extensive documentation around kickstartDS, the best practices employed, ways of creating components and integrations available. We will continuously expand on this, so please let us know what you're missing!

Create your Design System guide

This is our main guide, where you'll create a complete Design System from scratch... based on kickstartDS.

Start here: https://www.kickstartds.com/docs/guides/create/

Or jump directly into a specific section of it:

kickstartDS CLI

We have a dedicated CLI, you can find it over here:
https://github.com/kickstartDS/kickstartDS-cli

Our CLI helps deliver everyday tasks faster, and with less errors! Create and compile token, work with JSON Schema and other parts of kickstartDS.

Learn more about our CLI in our docs:
https://www.kickstartds.com/docs/intro/cli

Tooling

No modern technical solutions exists in a vacuum. Having a lively ecosystem enables broader and quicker adoption, while sharing knowledge and common learnings with a wider, organic community.

This is why we're also always actively trying to add building blocks to that ecosystem ourselves, while listening closely to which problems people are actually trying to solve.

We already have the following in place:

Generator (to convert your component JSON Schema into a variety of different formats, including component TypeScript types)
Gatsby Theme (to enable low-code integration of your Design System into your website)
Next.js helper (to smooth out development of Next.js based apps and interfaces with kickstartDS)
GraphQL tooling (to generate GraphQL types, fragments, amongst others matching your components and their documentation)

Learn more about generators on our integration page:
https://www.kickstartds.com/integrations/

Or read our documentation about tooling and integrations:
https://www.kickstartds.com/docs/integration/

Community

We try to have a healthy, friendly and active community. Although it's still quite small, this also enables us to respond to requests in a very hands-on fashion.

Feel free to join us on Discord!

If that's not your cup of tea, you can also reach out to us:

Development

This project is managed by lerna. Each module is an independent lerna package. Install module-specific dependencies only via lerna add (see "Install npm dependencies" section)!

Requirements

Environment

node >= v14 – if you have nvm installed, you can just run nvm use to select the right node version.
yarn classic

Global npm packages

commitizen – Constistent commit messages. Read more about the commit conventions in the "Commit changes"-section.

npm install -g lerna commitizen

If you cannot or don't want to install global packages, you can use yarn. E.g. instead of git cz, you can also call yarn git-cz.

Locally

Installation

yarn - installs npm dependencies for all frontend modules

Scripts

yarn build – builds the pattern library
yarn storybook start - starts a storybook with all components
yarn lint – checks sass- & js-files against potential errors
yarn list – lists all lerna packages

Release

Releases are mangaged by Auto.

Module Development

All modules are placed in the pacakges/components directory. They are individual npm packages mangaged by yarn workspaces.

Install npm dependencies

Don't install module dependencies manually, let yarn do the job! E.g. to install "package-xy" in module "news", run yarn workspace news add package-xy in the projects root directory.

Commit changes

This project uses commitizen. So in order to commit your changes, run git cz (or yarn git-cz if commitizen is not installed globally) instead of git commit. commitizen will then ask you a few questions about the change:

type – The type of the change (e.g. feature, fix, refactoring)
scope - The name of the module affected (e.g. base, products, news)
ticket number – The JIRA ticket id
subject - Contains a succinct description of the change
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize the first letter
- no dot (.) at the end
body - Just as in the subject, use the imperative, present tense. The body should include the motivation for the change and contrast this with previous behavior
breaking changes – Description of the change, justification and migration notes

This convention is based loosely on the angular commit message guidlines and ensures constistent commit messages, so they can be automatically converted into a changelog.

Contributing

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as below, without any additional terms or conditions.

License

This project is licensed under either of

at your option.

The SPDX license identifier for this project is MIT OR Apache-2.0.

kickstartds Goto Github PK