annibuliful / adapter

Adaptive Style Web Components

✨ Adapter 🎉

Adaptive Style Web Component Framework

• Built with ❤️
• Just 1 kB (minified + gzip)

Sample Usage

import { Adapter } from `@devcapsule/adapter`;

class Card extends Adapter {};

// Don't worry about tag's name conflicted, choose your own.
Card.define('el-card');

/* Style is isolated with defined tag name.
 * It won't go anywhere outside the component.
 * All <el-card> style will be updated.
 */
Card.addStyle(`
   display: block;
   min-height: 5rem;
   width: 100%;
   color: red;`
);

// Style class can also be used.
// This will style <el-card class="text-blue">
Card.addStyle(`
   &.text-blue {
      color: blue;
   }
`);

// Dynamically create stylable element.
const card = new Card();
card.addStyle(`color: black`);
document.body.append(card);

Project Board

https://github.com/orgs/keenlycode/projects/2

Software Development 💻

Prerequisites

• NodeJS : https://nodejs.org/en/
• Git : https://git-scm.com/
• Python >= 3.10 : https://www.python.org/

🛠️ Setup

1. Clone repository from github

$ git clone https://github.com/keenlycode/adapter.git
$ cd adapter

2. Install node dependencies

$ npm install

3. Setup Python environment & libs

$ python -m venv venv
$ source venv/bin/activate
$ pip install -r require.pip

🗃️ Build Library

# Build
$ npm run dist

📕 Build & Run Docs Server

$ npm run docs

🔍 Run Test

$ npm run test