# Cordwainer Elements

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 😸

---

Documentation: [cw-elements-b0c7e5.gitlab.io](https://cw-elements-b0c7e5.gitlab.io)

Source: [gitlab.com/cordwainer/cw-elements](https://gitlab.com/cordwainer/cw-elements)

---

## Cordwainers 🥾

Cordwainers, or "Cordwainer developers," can use this documentation to learn how to build Cordwainer Elements from source. You will need Node >= 14.17 to build and run the project locally.

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

### What are you using to build Cordwainer Elements?

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/).

### Developing

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

```bash
npm start
```

This will spin up the Cordwainer Elements 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.

The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs.

### 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 `cw-tag-name` with the desired tag name.

```bash
npm run create cw-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

Cordwainer Elements is an open source project and contributions are encouraged!

## License

Cordwainer Elements is developed by Matt Hand. It’s available under the terms of the MIT license.

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