https://github.com/grvpanchal/lit-chota

Chota CSS Framework for lit-element
https://github.com/grvpanchal/lit-chota

Last synced: about 2 months ago
JSON representation

Chota CSS Framework for lit-element

• Host: GitHub
• URL: https://github.com/grvpanchal/lit-chota
• Owner: grvpanchal
• Created: 2019-09-10T09:35:05.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-19T10:20:16.000Z (over 5 years ago)
• Last Synced: 2024-11-28T05:03:33.188Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# lit-chota

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/lit-chota)

[![npm version](https://badge.fury.io/js/lit-chota.svg)](https://badge.fury.io/js/lit-chota)

Chota CSS Framework for lit-element

## Installation

```shell

npm install lit-chota --save

```

Then import lit-input into your element:

```javascript

import litChota from 'lit-chota';

```

## Usage

Setup your index.html file

```html

  Chota Code Sample

  

    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;

    }

  

  

  

```

Dynamically load CSS Components

```javascript

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`

      


        

          


            Brand

            


              Link 1

              Link 2

            

          

        

        


          

            
Card title

          

          
A nisi ullam ... cupiditate?

          

            Submit

            Cancel

          

        

      

    `;

  }

}


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

```

OR Import CSS Sheet directly

```javascript

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`

      


        
I am inside a container

      

    `;

  }

}


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

```

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

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

## Authors

- Chota micro CSS framework is developed by Jenil Gogari

- Lit Element is brought to you by The Polymer Project