c0bra / svelma

Bulma components for Svelte

Svelma

Svelma is a set of UI components for Svelte based on the Bulma CSS framework.

Change Log

Documentation

See docs + demos site here

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>

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 (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.