Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keenlycode/adapter
Adaptive Style Web Components
https://github.com/keenlycode/adapter
css javascript web-component
Last synced: about 2 months ago
JSON representation
Adaptive Style Web Components
- Host: GitHub
- URL: https://github.com/keenlycode/adapter
- Owner: keenlycode
- License: isc
- Created: 2022-11-13T03:40:23.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-07T00:55:29.000Z (8 months ago)
- Last Synced: 2024-10-31T13:45:38.699Z (about 2 months ago)
- Topics: css, javascript, web-component
- Language: TypeScript
- Homepage: https://keenlycode.github.io/adapter/
- Size: 2.63 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
✨ Adapter 🎉
>
> CSS-in-JS Toolkit for Web Components
>
- Built with ❤️
- Just 2 kB (minified + gzip)
## Sample Usage
```js
import { Adapter } from `https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm`;
const cardStyle = `
display: block;
min-height: 5rem;
width: 100%;
color: red;
`;
class Card extends Adapter {
/** Style is isolated in defined tag name. */
static css = cardStyle;
};
/** Don't worry about tag's name conflicted, choose your own. */
Card.define('el-card');
/**
* More style can be added later, class can also be used.
* This will render CSS as `el-card.text-blue { color: blue }`
*/
Card.addStyle(`
&.text-blue { color: blue }
`);
/** Replace component styles with the base style `cardStyle`,
* This is just one from many way to do it.
*/
Card.css = cardStyle;
/** Dynamically create stylable element
* which inherit all styles from `Card`
*/
const card = new Card();
/** object has the same API as `Card`
* but style will be specific for this element only.
*/
card.css = `display: flex;`;
card.addStyle(`color: black;`);
document.body.append(card);
```
## Software Development 💻
### Project Board
https://github.com/orgs/keenlycode/projects/2
### Prerequisites
- NodeJS : https://nodejs.org/en/
- Git : https://git-scm.com/
### Prerequisites for document creation.
- Python >= 3.10 : https://www.python.org/
### 🛠️ Setup
1. Clone repository from github
```shell
$ git clone https://github.com/keenlycode/adapter.git
$ cd adapter
```
2. Install node dependencies
```shell
$ npm install
```
### 🗃️ Build Library
```shell
# Build
$ npm run dist
```
### 🔍 Run Test
```shell
$ npm run test
```
### Document Creation (Python 🐍)
```shell
$ python -m venv venv
$ source venv/bin/activate
$ pip install -r require.pip
$ npm run docs
```
## Special Thanks
2024-01-09
- [Joe Pea](https://github.com/trusktr): for a lot of suggestions
at the very beginning about Mixin, Style Rendering and Shadow DOM.
Knowing him by chance when I found interesting project : [Lume.io](https://lume.io) 👍️