Lit-chota NPM | npm.io

lit-chota

Chota CSS Framework for lit-element

Installation

npm install lit-chota --save

Then import lit-input into your element:

import litChota from 'lit-chota';

Usage

Setup your index.html file

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Chota Code Sample</title>
  <style>
    body {
      --color-primary: darkred; /* Modify you theme variables here */
      --color-lightGrey: #d2d6dd;
      --color-grey: #7e818b;
      --color-darkGrey: #3f4144;
      --color-error: #d43939;
      --color-success: #28bd14;
      --grid-maxWidth: 80rem;
      --grid-gutter: 2rem;
      --font-size: 1.6rem;
      --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
        "Droid Sans", "Helvetica Neue", sans-serif;
    }
  </style>
</head>

<body>
  <chota-test></chota-test>
  <script src="./main.js" type="module"></script>
</body>

</html>

Dynamically load CSS Components

import { LitElement, html, css } from 'lit-element';
import litChota from 'lit-chota';

class ChotaTest extends LitElement {
  constructor() {
    super();
    
    litChota.load(this.shadowRoot, ['card', 'grid', 'form', 'nav', 'tab']);
  }

  static get styles() {
    return [
      css`
      :host {
        display: block;
        color: var(--color-grey);
      }
  `];
  }

  render() {
    return html`
      <div class="container">
        <nav class="nav">
          <div class="nav-left">
            <a class="brand" href="#">Brand</a>
            <div class="tabs">
              <a>Link 1</a>
              <a class="active">Link 2</a>
            </div>
          </div>
        </nav>
        <div class="card">
          <header>
            <h4>Card title</h4>
          </header>
          <p>A nisi ullam ... cupiditate?</p>
          <footer class="is-right">
            <a class="button primary">Submit</a>
            <a class="button">Cancel</a>
          </footer>
        </div>
      </div>
    `;
  }
}

customElements.define('chota-test', ChotaTest);

OR Import CSS Sheet directly

import { LitElement, html, css } from 'lit-element';
import 'lit-chota'; // <-- Only do this once in entire project to register variables
import grid from 'lit-chota/dist/grid';

class ChotaTest extends LitElement {

  static get styles() {
    return [
      grid, // <-- Place you CSS Sheets here
      css`
      :host {
        display: block;
      }
  `];
  }

  render() {
    return html`
      <div class="container">
        <h2>I am inside a container</h2>
      </div>
    `;
  }
}

customElements.define('chota-test', ChotaTest);

Note: Make sure node resolver is turned on on es-dev-server or webpack

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature

css lit-html lit-element css-framework css3

dimport lit-element

@infinitebrahmanuniverse/nolb-lit-@everything-registry/sub-chunk-2083 @zalastax/nolb-lit-

0.1.1

5 years ago

0.1.0

5 years ago