https://github.com/c0bra/svelma

Bulma components for Svelte
https://github.com/c0bra/svelma

bulma svelte svelte-components svelte3 sveltejs

Last synced: about 2 months ago
JSON representation

Bulma components for Svelte

• Host: GitHub
• URL: https://github.com/c0bra/svelma
• Owner: c0bra
• License: mit
• Created: 2019-05-22T21:05:27.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-08-15T18:40:06.000Z (about 1 year ago)
• Last Synced: 2024-05-20T03:14:30.668Z (4 months ago)
• Topics: bulma, svelte, svelte-components, svelte3, sveltejs
• Language: HTML
• Homepage: https://c0bra.github.io/svelma
• Size: 1.94 MB
• Stars: 537
• Watchers: 11
• Forks: 44
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bulma - svelma - Bulma components for Svelte (UI Libraries & Components / Courses)

README

        
# Svelma

> Svelma is a set of UI components for [Svelte](https://svelte.dev) based on the [Bulma](http://bulma.io) CSS framework.









[Change Log](CHANGELOG.md)

# Documentation

[See docs + demos site here](https://docs-abbychau.vercel.app/svelma)

# Quick Start

### 1. Import svelma and dependencies via npm to your project

```bash

$ 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

```js

// 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

```html

  import 'bulma/css/bulma.css'

  import { Button } from 'svelma'

I'm a Button!

```

### 4. Include [Font Awesome](https://fontawesome.com/) icons

From CDN in your HTML page:

```html

```

Or as an npm package imported into your root component:

`$ npm install --save @fortawesome/fontawesome-free`

```html

  import 'bulma/css/bulma.css'

  import '@fortawesome/fontawesome-free/css/all.css'

```

### SSR

If you are doing server-side rendering with Sapper (or [SvelteKit](https://kit.svelte.dev/)), 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.:

```js

import Button from 'svelma/src/components/Button.svelte'

```

instead of

```js

import { Button } from 'svelma'

```

# Inspiration

Much thanks to the [Buefy](https://buefy.org) and [Svelma2](https://github.com/abbychau/svelma2) projects! It provided the inspiration and lots of code examples for this version of Svelma.