svelte-chota

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

Why chota?

When you decide to use Svelte 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 using chota in your Svelte projects.

Documentation

Svelte-chota documentation.
chota documentation.

Installation

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 (usually App.svelte) and add chota import at the top of a <script> block:

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

Usage

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

<script>
    import {Input,Button} from 'svelte-chota';
</script>

<Input placeholder="What do you want?" /> <Button>Find</Button>

Events handlers

You can use any on:eventname directive with any components:

<script>
    import {Button} from 'svelte-chota';
    let button_text = 'Hover me';
</script>

<Button 
    on:mouseenter={ e => button_text="Don't touch me!" }
    on:mouseleave={ e => button_text="Ok, hover me again" }
>{button_text}</Button>

Attributes

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

<script>
    import {Card} from 'svelte-chota';
</script>

<Card class="is-rounded text-center" style="height:100px; width:100px" title="Hello">
    <h1>Hey!</h1>
</Card>