kaf.js sample 10

by mtsgi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mtsgi/[email protected]/d/kitstrap.css">
<script src="https://mtsgi.github.io/kafjs/kaf.js"></script>
<main id="kaf">
  <div class="mybox1">My Box 1</div>
  <div class="mybox2">
    My Box 2
    <div id="mytext">Style sheets are fun!</div>
  </div>
</main>

<div class="mybox1">My Box 1</div>

JavaScript

import Kaf from 'https://mtsgi.github.io/kafjs/kaf.js';

const kaf = new Kaf({
  elem: '#kaf',
  styles: {
    '.mybox1': {
      padding: '10px',
      backgroundColor: 'dodgerblue',
      color: 'white'
    },
    '.mybox2': {
      padding: '10px',
      backgroundColor: '#f0f0f0',
      '#mytext': {
        color: 'red'
      }
    }
  }
});