Web Components built on top of Open Props, utilizing Progressive Enhancement. Minimal JS, maximum compatibility. Works with any front end framework (and without).
[!IMPORTANT]
This project is still in active development
To use base themes, put the following in your html head element:
<link rel="stylesheet" href="open-comps/dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="open-comps/light.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="open-comps/main.css" />
This includes all the colors for both light and dark modes as well as all
the normalized styling.
Place the following in your head element:
<link rel="stylesheet" href="open-comps/components.css" />
And either in your head element or main JS file:
import "open-comps"
<link rel="stylesheet" href="open-comps/qr-code.css" />
and
import "open-comps/qr-code.js"
Note this can be included anywhere in your body element as:
<body>
...
<link rel="stylesheet" href="https://esm.sh/open-comps@1.0.6/components/qr-code/qr-code.css">
<qr-code value="https://stellarand.com"></qr-code>
<qr-code value="https://github.com/andstellar"></qr-code>
<script type="module" src="https://esm.sh/open-comps@1.0.6/esm/components/qr-code/qr-code.js"></script>
...
</body>
Or using is-land:
<is-land on:visible on:idle>
<qr-code value="https://stellarand.com"></qr-code>
<template data-island>
<link rel="stylesheet" href="https://esm.sh/open-comps@1.0.6/components/qr-code/qr-code.css">
<script type="module" src="https://esm.sh/open-comps@1.0.6/esm/components/qr-code/qr-code.js"></script>
</template>
</is-land>
This project uses the following for development: