Skip to Content

Interactivity for You

drab is a JavaScript library of interactive primitives designed to work on any website.

Write JavaScript, or don’t

drab adds interactivity by enhancing your markup with custom elements. Each element is configured using HTML attributes, making it compatible with any backend or templating system. For example, this button toggles fullscreen mode:

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

Features

  • 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.
  • If you are writing JavaScript, each element can be extended or renamed to be used however you see fit.
  • The library is small, with zero dependencies.
  • drab is not built on top of a 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
  3. Start the development server
bash
git clone https://github.com/rossrobino/drab.git
cd drab
npm i
npm run dev

Making changes

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