Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rossrobino/drab
Headless custom element library
https://github.com/rossrobino/drab
components custom-elements ui web-components web-components-library
Last synced: 14 days ago
JSON representation
Headless custom element library
- Host: GitHub
- URL: https://github.com/rossrobino/drab
- Owner: rossrobino
- License: mit
- Created: 2023-01-06T21:34:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T14:54:40.000Z (7 months ago)
- Last Synced: 2024-04-12T22:23:10.707Z (7 months ago)
- Topics: components, custom-elements, ui, web-components, web-components-library
- Language: TypeScript
- Homepage: https://drab.robino.dev
- Size: 1.19 MB
- Stars: 208
- Watchers: 4
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# A Headless Custom Element Library
## Features
**drab** focuses on providing JavaScript functionality where it's most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library.
### Built on the web platform
- Each element is a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). So you can use them [with a framework](http://drab.robino.dev/getting-started/#frameworks), without one, or even directly in a markdown file. These components will work [regardless of your project's architecture](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/).
- **drab** does _not_ use the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), so you can style content within these elements as usual with CSS.
- Since you provide the HTML, these elements can take advantage of what JavaScript frameworks excel at---creating reusable markup that can be server side rendered.
- Each element can be imported, extended, named, and used however you see fit.
### Minimal bundle size
- **drab** has zero dependencies.
### Write JavaScript, or don't
- Elements can be [installed](http://drab.robino.dev/getting-started/#install) as a package (recommended), or utilized without writing any JavaScript by adding a `script` tag to your document.
- Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.
### Built in animations
- Uses the [web animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) for transitions.
- Transitions are disabled for users who prefer reduced motion.
- Extend the `Animate` element to build your own elements.
## Contributing
Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab).
Since this is a headless library, simple elements like a badge that can be easily created with HTML and CSS are not included. Elements such as a select, or a date picker are also not included in favor of the native HTML elements.
### Local Development
This library is built with [TypeScript](https://www.typescriptlang.org/) and [tsup](https://tsup.egoist.dev/). The docs are built with [Vite](https://vitejs.dev), [domco](https://domco.robino.dev), and [TailwindCSS](https://tailwindcss.com). The package contents are located in `src/package`.
1. Clone the [repository](https://github.com/rossrobino/drab)
2. `bun i`
3. `bun dev`
### Making changes
1. Add or edit the element in `src/package`---each element should extend `Base` or `Animate`. Each element has a `index.ts` file with the source code, and then a `define.ts` file where it is imported and called for use with a CDN.
2. Add or edit the example in `src/docs`.
3. Export the element from `src/package/index.ts`.
4. Run `bun doc` to document your element with [TypeDoc](https://typedoc.org/).
5. Add the element as an entry point to `tsup.config.ts`, then run `bun package` to build with tsup.