css-badge

css-only badge component

Install: $ npm install css-badge

Then include the `/node_modules/css-badge/css-badge.css file in your project.

Links

Documentation
GitHub
NPM
Jane Ori

How?

This is using a new CSS trick I came up with that enables an api like --badge-size: lg; in vanilla CSS. No JS, no container queries, no build step. Just CSS. And only one single class name!

Browser Support

Chromium Only, for now

The limiting factor for browser support is the ability to use specific syntaxes for CSS's @property's syntax's syntax, including:

• the | combinator,
• "<integer>" syntax,
• and custom-ident keywords (such as "big | bigger | BIGGER" from the spec's examples)

The current global user support is 72.77% according to caniuse.