Repository files navigation

Svelte UI components based on the super light-weightchota CSS framework.

When you decide to useSvelte in your projects, you expect very tiny bundles of code.

chota is a super light-weight CSS framework, which adds only ~3kb of gzipped code to your CSS bundle.

Svelte-chota is a UI kit for easily usingchota in yourSvelte projects.

• Svelte-chotadocumentation.
• chotadocumentation.

You should install two packages:

• chota - css framework itself
• svelte-chota - Svelte components for chota

npm install -D chota svelte-chota

Then open the app root file (usuallyApp.svelte) and addchota import at the top of a<script> block:

<script>import'chota';    ...</script>

Just import the necessary components from the svelte-chota package in your components:

<script>import{Input,Button}from'svelte-chota';</script><Inputplaceholder="What do you want?"/><Button>Find</Button>

You can use anyon:eventname directive with any components:

<script>import{Button}from'svelte-chota';letbutton_text='Hover me';</script><Buttonon:mouseenter={e => button_text="Don't touch me!" }    on:mouseleave={ e => button_text="Ok, hover me again" }>{button_text}</Button>

Any attribute can be passed to the component, even theclass attribute.

<script>import{Card}from'svelte-chota';</script><Cardclass="is-rounded text-center"style="height:100px; width:100px"title="Hello"><h1>Hey!</h1></Card>