Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phase2/outline
Tooling infrastructure for modern web component development.
https://github.com/phase2/outline
components components-library design-system hacktoberfest javascript lit lit2 outline storybook tailwindcss typescript web-components
Last synced: 2 days ago
JSON representation
Tooling infrastructure for modern web component development.
- Host: GitHub
- URL: https://github.com/phase2/outline
- Owner: phase2
- License: mit
- Created: 2021-06-23T14:49:29.000Z (over 3 years ago)
- Default Branch: next
- Last Pushed: 2024-03-12T14:11:05.000Z (11 months ago)
- Last Synced: 2025-02-09T23:01:52.779Z (9 days ago)
- Topics: components, components-library, design-system, hacktoberfest, javascript, lit, lit2, outline, storybook, tailwindcss, typescript, web-components
- Language: TypeScript
- Homepage: https://outline.phase2tech.com
- Size: 70.7 MB
- Stars: 130
- Watchers: 34
- Forks: 27
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-lit - Outline Design System - Web component based design system starter kit. (Design Systems)
- awesome-web-components - OutlineJS - Web component based design system starter kit. (Real World / Design Systems)
README
# OutlineJS
[](https://npmjs.org/package/@phase2/outline-core)
[](https://gitpod.io/#https://github.com/phase2/outline)
[](https://github.com/phase2/outline/blob/next/package.json)
## Storybook Hosting
[](https://outlinejs.style/)
[](https://outline.phase2tech.com/)
[](https://next--636082675ab89919e6bcfd40.chromatic.com/)
Outline is a both a growing [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) library as well as a toolkit for building out bespoke design systems for a wide variety of client and personal usages. Outline is based on the latest technologies and tools to help your component authoring experience and facilitate adoption in your organization.
## More than a Design System
Outline is much more than just you run of the mill design system. Outline provides an added benefit on top of multiple similar libraries available.
* Outline is a set of components
* Outline is a set of tooling and technology to scaffold design systems for a multitude of projects
* Outline is a set of rules for defining components
* Outline is a set of rules for integrating components
* Outline provides well curated documentation on many complex topics
* Outline grows with internal lessons learned project after project here [@phase2](https://github.com/phase2).
Outline and Outline design systems are built with many of the following notable tools:
* [](https://lit.dev/)
* [](https://lit.dev/)
* [](https://www.typescriptlang.org/)
* [](https://www.w3.org/TR/css-variables-1/)
* [](https://www.w3.org/TR/css-variables-1/)
* [](https://postcss.org/)
* [](https://postcss.org/)
## Scaffolding a new Outline project
Outline is organized as a mono-repo and is available to use via NPM Packages and our CLI. The `outline-cli` simplifies the setup process using pre-defined templates available in the `outline-templates` package as guides on basic scaffolding of new Outline based projects.
### Using NPX (recommended)
> This method will load the latest version of the Outline CLI to cache, and prompt you when an update is available. This makes it easier than managing a local version to simply run `outline init` instead.
```bash
npx @phase2/outline-cli init
```
### Global Installation
This method will require manually updating from time to time for the latest updates on your system. If you are using [NVM](https://github.com/nvm-sh/nvm) appropriately, any version of node would need this installed. If you are using yarn, you can just install it once globally.
#### With NPM
```bash
npm install -g @phase2/outline-cli
outline init
```
#### With Yarn
```bash
yarn global add @phase2/outline-cli
outline init
```
## Contributing to Outline
Detailed information regarding how to contribute to Outline development, can be found in [CONTRIBUTING.md](./CONTRIBUTING.md). **Expect this information to be refined soon.**
Please see [Component Development Guide](https://github.com/phase2/outline/tree/affc18d1a7ca6a304813f97f0563afcb6967a6ef/packages/documentation/outline-docs/src/guides/development/component-development) for information about developing for Outline.
[](https://www.netlify.com)