https://github.com/AlexxNB/svelte-chota

Svelte UI components based on super lightweight chota CSS framework.
https://github.com/AlexxNB/svelte-chota

chota svelte sveltejs ui ui-components ui-kit

Last synced: 13 days ago
JSON representation

Svelte UI components based on super lightweight chota CSS framework.

• Host: GitHub
• URL: https://github.com/AlexxNB/svelte-chota
• Owner: AlexxNB
• License: mit
• Created: 2019-09-28T08:43:48.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-12T14:03:04.000Z (over 1 year ago)
• Last Synced: 2024-10-17T11:08:17.538Z (20 days ago)
• Topics: chota, svelte, sveltejs, ui, ui-components, ui-kit
• Language: Svelte
• Homepage: https://alexxnb.github.io/svelte-chota
• Size: 957 KB
• Stars: 288
• Watchers: 8
• Forks: 20
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - AlexxNB/svelte-chota - Svelte UI components based on super lightweight chota CSS framework. (svelte)
• awesome-svelte - svelte-chota - Component library built with Chota, a super light-weight CSS framework (UI Libraries / Mobile)

README

        
# svelte-chota

Svelte UI components based on the super light-weight [chota](https://jenil.github.io/chota/) CSS framework.

[![npm](https://img.shields.io/npm/v/svelte-chota)](https://www.npmjs.com/package/svelte-chota)   [![npm](https://img.shields.io/npm/dt/svelte-chota)](https://www.npmjs.com/package/svelte-chota)    [![](https://github.com/AlexxNB/svelte-chota/workflows/Publish%20on%20NPM/badge.svg)](https://github.com/AlexxNB/svelte-chota/actions?workflow=Publish+on+NPM)    [![](https://github.com/AlexxNB/svelte-chota/workflows/Build%20Documentation/badge.svg)](https://github.com/AlexxNB/svelte-chota/actions?workflow=Build+Documentation)

## Why chota?

When you decide to use [Svelte](https://svelte.dev) in your projects, you expect very tiny bundles of code.

[chota](https://jenil.github.io/chota/) is a super light-weight CSS framework, which adds only ~3kb of gzipped code to your CSS bundle.

[Svelte-chota](https://github.com/AlexxNB/svelte-chota) is a UI kit for easily using [chota](https://jenil.github.io/chota/) in your [Svelte](https://svelte.dev) projects.

## Documentation

* Svelte-chota [documentation](https://alexxnb.github.io/svelte-chota).

* chota [documentation](https://jenil.github.io/chota/).

## Installation

You should install two packages:

* `chota` - css framework itself

* `svelte-chota` - Svelte components for chota

```bash

npm install -D chota svelte-chota

```

Then open the app root file (usually `App.svelte`) and add `chota` import at the top of a `` block:

```html

<script>

    import 'chota';

    ...

```

## Usage

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

```html

    import {Input,Button} from 'svelte-chota';

 Find

```

### Events handlers

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

```html

    import {Button} from 'svelte-chota';

    let button_text = 'Hover me';

 button_text="Don't touch me!" }

    on:mouseleave={ e => button_text="Ok, hover me again" }

>{button_text}

```

### Attributes

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

```html

    import {Card} from 'svelte-chota';

    
Hey!


```