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:
<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/
.
- Clone the repository
- Install dependencies with npm
- Start the development server
git clone https://github.com/rossrobino/drab.git
cd drab
npm i
npm run dev
Making changes
- Add or edit the element in
packages/drab/src/
—each element should extendBase
. - Each element has a
index.ts
file with the source code, and then adefine.ts
file where it is imported and defined. - Add or edit the example in
apps/docs/pages/
. - Export the element from
packages/drab/src/index.ts
. - Run
npm run doc
to document your element with TypeDoc. - Add the element as an entry point to
package.json
. - Run
npm run build
to verify your build.