# Circular

A forward-thinking library of web components.

- Works with all frameworks 🧩
- Works with CDNs 🚛
- Fully customizable with CSS 🎨
- Includes an official dark theme 🌛
- Built with accessibility in mind ♿️
- Open source 😸

Designed and developed in Hamburg by Interzero Circular Design System Team

Inspired by [shoelace.style](https://shoelace.style), designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).

---

Documentation: [circular](https://circular.entw.portale.interzero.de)

Source: [gitlab.interzero.de/circular-team/circular](https://gitlab.interzero.de/circular-team/circular)

Twitter: [@circular\_\_o](https://twitter.com/circular__o)

---

## Circular makers 🥾

Circular makers, or "Circular developers," can use this documentation to learn how to build Circular from source. You will need Node >= 18 to build and run the project locally.

**You don't need to do any of this to use Circular!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Circular.

If that's not what you're trying to do, the [documentation website](https://circular.entw.portale.interzero.de/) is where you want to be.

### What are you using to build Circular?

Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).

### Forking the Repo

Start by [forking the repo](https://gitlab.interzero.de/circular-team/circular/-/forks/new) on GitLab, then clone it locally and install dependencies.

```bash
git clone https://gitlab.interzero.de/circular-team/circular.git
cd circular
npm install
```

### Developing

Once you've cloned the repo, run the following command.

```bash
npm start
```

This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.

### Building

To generate a production build, run the following command.

```bash
npm run build
```

### Creating New Components

To scaffold a new component, run the following command, replacing `cds-tag-name` with the desired tag name.

```bash
npm run create cds-tag-name
```

This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.

### Contributing

Circular is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.

## License

Circular is designed and develop in Hamburg by Interzero Circular Design System Team. It’s available under the terms of the MIT license.

<!-- **If you’re using Circular to make a profit,** We respectfully ask that you help [fund its original developer](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.

👇 Your support is very much appreciated! 👇

- [Become a Circular sponsor](https://github.com/sponsors/claviska)
- [Star on GitHub](https://github.com/circular-o/circular/stargazers) -->

- [Follow on Twitter](https://twitter.com/circular__o)

Whether you're building Circular or building something _with_ Circular — have fun creating! 🥾