Newly Paranoid Maintainers

    svelma-enhanced

    0.4.8 • Public • Published

    Svelma

    Svelma is a set of UI components for Svelte based on the Bulma CSS framework. Some features are experimental and are being developed. Pull requests are welcome. Forked from https://github.com/c0bra/svelma. This fork currently only has bug fixes.

    Documentation

    See documentation and demo here

    Setup

    1. Install svelma and dependencies via npm

    yarn add bulma svelma-enhanced
    yarn add -D node-sass svelte-preprocess rollup-plugin-postcss

    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>

    You can customize Bulma to suit your branding:

    1. Create SASS/SCSS file, say app.scss, and add it to App.svelte
    2. Import required SASS files from Bulma in app.scss
    3. Override SASS/SCSS variables

    4. Install Font Awesome icons

    Fontawesome Webfonts come with certain side effects and so SVG Icons are recommended for use with svelte.

    # add SVG icons
    yarn add -D @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

    Add fontawesome to your App. The following will add all icons, but you can also add SVG icons selectively if you wanted to make you app a lot smaller.

    <!-- App.svelte -->
    <script>
      import 'bulma/css/bulma.css';
    
      // add all fontawesome icons
      import { library, dom } from '@fortawesome/fontawesome-svg-core';
      import { fas } from '@fortawesome/free-solid-svg-icons';
      import { far } from '@fortawesome/free-regular-svg-icons';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      library.add(fab, fas, far);
      dom.watch();
    </script>

    Alternatively, you shall also use a link tag in your index.html using a CDN, or use webfonts but this is not recommended.

    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.

    import Button from 'svelma/src/components/Button.svelte';          // Use this
    // import { Button } from 'svelma';                                // Don't use this

    License

    See attached Licence

    Install

    npm i svelma-enhanced

    DownloadsWeekly Downloads

    2

    Version

    0.4.8

    License

    MIT

    Unpacked Size

    94.8 kB

    Total Files

    38

    Last publish

    Collaborators

    • saravanabalagi