lit-chota
v0.1.1
Published
Chota CSS Framework for lit-element
Downloads
1
Maintainers
grvpanchalReadme
lit-chota
Chota CSS Framework for lit-element
Installation
npm install lit-chota --saveThen 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