Adapter

2.5.3 CSS-in-JS Toolkit for Web Components

$ npm i @devcapsule/adapter

🎉 CSS to the next level.

Adapter make CSS programmable in OOP manner with Javascript and Web Components. It's packed with well designed features to help developers create styling system for web components such as style inheritance, scoped style and style isolation.

Javasacript

import { Adapter } from 'https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm';

class Card extends Adapter {};

Card.css = `
  display: flex;
  flex-wrap: wrap;
  background-color: blue;
  border: 1px solid;
  border-radius: 5px;
  & h1 {
    margin: 0;
  }
`;

Card.define('el-card');

HTML

<el-card>
  <h1>This is a card</h1>
</el-card>

🎉 Easy to start & learn

You can start using Adapter without Node.js or any JS Build Tools. Just use plain Javascript, right away in your browser.

HTML

<!-- import from CDN -->
<script type="module">
import { Adapter } from 'https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm';

class Container extends Adapter {};

Container.css = `
  margin: auto;
  max-width: 1000px;
  min-width: 300px;
  width: 90%;
`;
</script>

🎉 Compact

~ 2kB minify gzip