outline
outline copied to clipboard
Tooling infrastructure for modern web component development.
For quick browser-based development, open this project in Gitpod. It will automatically build an environment and run Storybook.
Outline Design System
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
Contributing to Outline
Information regarding how to contribute to Outline development, can be found in CONTRIBUTING.md.
Local Setup
Outline is organized as a mono-repo and is available to use via NPM Packages and our CLI.
Install the cli:
npm install -g @phase2/outline-cli
Then run the command:
outline init project-name
Optionally use npx:
npx @phase2/outline-cli init project-name
The init
command will clone Outline's starter files then run yarn install
cd project-name
Ensure you are using the correct version of npm
nvm use
If you need to update your node version, see the usage documentation for nvm.
Storybook Development
Primary component development is done and demonstrated via Storybook.
Start storybook instance.
yarn start
Production builds
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:
One time build
yarn rollup
Enable in watch mode
yarn rollup.watch
Resetting local environment
The following commands help clean a local environment.
- Cleanup generated assets:
yarn clean
- Cleanup node packages:
yarn reset
- Full cleanup & restart:
yarn reboot