Interactivity for You

Overview

drab is a JavaScript library of interactive custom elements that can be used on any website.

Write JavaScript, or don’t

• The library can be installed as a package (recommended), or utilized without writing any JavaScript by adding a <script> tag to your document.
• Since you provide the HTML, these elements can take advantage of what templating frameworks excel at—creating reusable markup that can be server side rendered.
• Each element can be configured using HTML attributes, making it possible to use an alternative language for your backend. Here’s an example of a button that toggles the Fullscreen API.

<drab-fullscreen>
	<button data-trigger type="button">Fullscreen</button>
</drab-fullscreen>

Built on the web platform

• Each element is a custom element. So you can use them with a framework, without one, or directly in a markdown file. These components will work regardless of your project’s architecture.
• drab does not use the shadow DOM, so you can style content within these elements as usual with CSS.
• Each element can be imported, extended, named, and used however you see fit.

Minimal bundle size

• drab is small, has zero dependencies, and is not built on top of web component framework.

---

Contributing

Find an bug or have an idea? Create an issue on GitHub.

Since this is a headless library, simple elements like a badge that can be easily created with HTML and CSS are included in the JavaScript library, there are references to CSS only elements in the styles section. 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, this site is built with domco and uico. The package contents are located in packages/drab/.

1. Clone the repository
2. Install dependencies with npm - npm i
3. Start the development server - npm run dev

Making changes

1. Add or edit the element in packages/drab/src/—each element should extend Base. Each element has a index.ts file with the source code, and then a define.ts file where it is imported and defined for convenient usage.
2. Add or edit the example in apps/docs/pages/.
3. Export the element from packages/drab/src/index.ts.
4. Run npm run doc to document your element with TypeDoc.
5. Add the element as an entry point to package.json, then run npm run build to verify your build.