For quick browser-based development, open this project in Gitpod. It will automatically build an environment and run Storybook.

Outline is a web component based design system starter kit. Outline is based on the latest technologies and tools to help your component authoring experience and facilitate adoption in your organization.

Outline is built with the following tools:

• Lit
• TypeScript
• CSS Custom Properties (CSS Vars)
• Tailwind CSS (Optional)
• Tailwind JIT Compiler
• Storybook
• Rollup

Information regarding how to contribute to Outline development, can be found in CONTRIBUTING.md.

Run the following steps to ensure your environment is installed and up to date. This assumes you are using NVM locally to manage your NPM version(s).

git clone [email protected]:phase2/outline.git &&cd outline

nvm use

If you need to update your node version, see the usage documentation for nvm.

yarn install

Primary component development is done and demonstrated via Storybook.

yarn start

Runs both tsc and yarn rollup to handle the following:

• Packaging individual components to dist directory.
• Packaging modern and legacy builds of all components to dist directory.

yarn build

To only run the rollup build, which handles the component bundling into modern and legacy builds:

yarn rollup

yarn rollup.watch

The following commands help clean a local environment.

• Cleanup generated assets: yarn clean
• Cleanup node packages: yarn reset
• Full cleanup & restart: yarn reboot