Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abbychau/svelma2

Continue the Great Work of Svelma
https://github.com/abbychau/svelma2

Last synced: 13 days ago
JSON representation

Continue the Great Work of Svelma

Awesome Lists containing this project

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://abbychau.github.io/svelma2)

# Quick Start

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

```bash
$ npm install --save bulma svelma2
$ 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 'svelma2'

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, 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 'svelma2'
```

# Inspiration

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