Svelma

Overview

Svelma is a set of UI components for Svelte, built on top of the Bulma CSS framework. It offers a comprehensive collection of pre-designed components that can be easily integrated into Svelte projects. With Svelma, developers can quickly create modern and stylish user interfaces without having to build components from scratch.

Features

• UI Component Library: Svelma provides a wide range of UI components, including buttons, forms, cards, navigation bars, and more. These components are designed following the Bulma CSS framework, ensuring consistency and compatibility.
• Easy Integration: Svelma can be easily integrated into Svelte projects. By importing the necessary dependencies and including the Svelma components, developers can start using the UI components with minimal configuration.
• Font Awesome Icons: Svelma includes support for Font Awesome icons, allowing developers to easily incorporate icons into their UI components. The icons can be included either from a CDN or as an npm package.

Installation

To install Svelma in your Svelte project, follow these steps:

1. Import Svelma and its dependencies via npm:

$ npm install --save svelma bulma

2. Add the postcss plugin to your rollup config. This enables the necessary CSS processing for Svelma:

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  plugins: [
    postcss(),
    // other plugins...
  ],
  // other configurations...
}

3. Import Bulma’s CSS and Svelma components into your project:

// App.svelte
<script>
  import 'bulma/css/bulma.css';
  import 'svelma/dist/svelma.css';
</script>

<template>
  <!-- Your Svelte components using Svelma -->
</template>

4. Include Font Awesome icons either from a CDN in your HTML page:

<script src="https://kit.fontawesome.com/your-kit-id.js" crossorigin="anonymous"></script>

or as an npm package imported into your root component:

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

// App.svelte
<script>
  import '@fortawesome/fontawesome-free/css/all.css';
</script>

<template>
  <!-- Your Svelte components with Font Awesome icons -->
</template>

Note: If you are doing server-side rendering with Sapper or SvelteKit, make sure to directly import the .svelte files instead of importing from the compiled module.

Summary

Svelma is a powerful UI component library for Svelte, providing developers with a wide range of pre-designed components following the Bulma CSS framework. It offers easy integration and support for Font Awesome icons. By using Svelma, developers can create modern and visually appealing user interfaces in their Svelte projects with ease.