Adapter

2.5.2

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 {
  static 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 {
  static css = `
    margin: auto;
    max-width: 1000px;
    min-width: 300px;
    width: 90%;
  `;
}
</script>

🎉 Compact

~ 2kB minify gzip

🎉 Integrate with other libraries