svelte-chota
Svelte UI components based on super lightweight chota CSS framework.
Why chota?
When you decides to use Svelte in your projects, you expects very tiny bundles of result code.
So the chota is a super light-weight CSS framework, which will add only ~3kb of gzipped code to your CSS bundle.
Svelte-chota is UI kit for easy using chota in your Svelte projects.
Documentation
- Svelte-chota documentation.
- chota documentation.
Installation
There are three ways, how to start using svelte-chota. Recomendended one:
Install packages
You should install three packages:
chota- css framework itselfsvelte-chota- Svelte components for chotarollup-plugin-postcss- allows import css files inside your components and pack it in the bundle.
npm install -D chota svelte-chota rollup-plugin-postcss
Rollup config
Open the rollup.config.js file and edit the config as shown:
...
// import postccs plugin at the top of the file
import postcss from 'rollup-plugin-postcss';
....
const production = !process.env.ROLLUP_WATCH;
export default {
...
plugins: [
...
svelte({
...
// REPLACE
// css: css => {
// css.write('public/bundle.css');
// }
// BY:
emitCss:true
}),
// add the postccs plugin
postcss({
extract: true,
minimize: production,
sourceMap: !production
}),
...
]
There we adding PostCSS plugin to pack all component's incapsulated CSS and imported CSS files in a single bundle.css
Importing chota
Now you can import chota in the your App.svelte file:
<script>
import "chota";
</script>
Note: because you installed PostCSS plugin, now you can import any external css file same way.
Usage
Just import necessary components from the svelte-chota package in your components:
<script>
import {Input,Button} from 'svelte-chota';
</script>
<Input placeholder="What 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
You can pass any attributes 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>