c0braSvelma
Svelma is a set of UI components for Svelte based on the Bulma CSS framework.
Documentation
Quick Start
1. Import svelma and dependencies via npm to your project
$ npm install --save bulma svelma
$ npm install node-sass svelte-preprocess rollup-plugin-postcss --save-dev2. Add the postcss plugin to your rollup config
// rollup.config.js
import postcss from 'rollup-plugin-postcss'
import preprocess from 'svelte-preprocess'
// ...
export default {
// ...
plugins: [
svelte({
// ...
preprocess: preprocess()
}),
postcss(),
}
}3. Import Bulma's CSS and Svelma components
<!-- App.svelte -->
<script>
import 'bulma/css/bulma.css'
import { Button } from 'svelma'
</script>
<button type="is-primary">I'm a Button!</button>4. Include Font Awesome icons
From CDN in your HTML page:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" />Or as an npm package imported into your root component:
$ npm install --save @fortawesome/fontawesome-free
<!-- App.svelte -->
<script>
import 'bulma/css/bulma.css'
import '@fortawesome/fontawesome-free/css/all.css'
</script>SSR
If you are doing server-side rendering with Sapper, you'll need to import the .svelte files directly so that your app can compile them, rather than importing from the compiled module.
i.e.:
import Button from 'svelma/src/components/Button.svelte'instead of
import { Button } from 'svelma'Inspiration
Much thanks to the Buefy and Svelma2 projects! It provided the inspiration and lots of code examples for this version of Svelma.