Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/abbychau/svelma2
- Owner: abbychau
- License: mit
- Created: 2021-03-17T15:51:47.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-03-19T09:33:34.000Z (over 3 years ago)
- Last Synced: 2024-10-11T12:43:30.074Z (about 1 month ago)
- Language: HTML
- Size: 1.73 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
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.