Svelma
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-dev
2. 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>
Font Awesome icons
4. IncludeFrom 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 (or SvelteKit), 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.