Bulmalite

An unofficial Vue 3 implementation of the Bulma CSS framework.

The principles behind this project:

• Modularity
• Leveraging of TypeScript functionality
• Usage of slots instead of child components
• Bulma style modifier props
• Props add functionality
• Passing of native bulma classes is preferred above custom props

Bulmalite >= 1.0 is only compatible with Bulma 1.0 and up.

Comparisons

These comparisons demonstrate some effects of the principles outlined above.

Icons

Buefy:

<b-iconpack="fas" icon="user" size="is-small"></b-icon>

Bulmalite:

<bl-iconclass="is-small" icon="fas fa-user"></bl-icon>

class is used to pass the native .is-small to the icon. The icon itself can be specified in a single prop.

Modals

Buefy

<b-modal:active.sync="isModalActive" :canCancel="false"></b-modal>

Bulmalite

<bl-modalv-model="isModalActive"></bl-modal>

Two-way binding with bulmalite components uses v-model by default. There is no need to disable modal close behavior options, props can only add functionality.

For example:

<bl-modalv-model="isModalActive" has-modal-closehas-background-close></bl-modal>

Props use a bulma-like syntax.

Install

npm install bulmalite

Usage

Javascript

Register all components as a plugin

import{createApp}from'vue';importbulmalitefrom'bulmalite';// Create a Vue 3 app the normal wayconstmyApp=createApp(App);// Register bulmalite myApp.use(bulmalite);

Default component names are prefixed with 'bl-'

You can also include individual components from the dist directory

importBlDropdownfrom'bulmalite/dist/components/dropdown/Dropdown.vue';// Add the bulmalite component to the vue component optionsexportdefault{components: {
BlDropdown,},
...
}

Sass

Bulmalite assumes your dev environment is set up to support .scss files

You can import all stylesheets directly in Javascript or Sass-files

import'node_modules/bulmalite/sass/bulmalite.scss';

@import'node_modules/bulmalite/sass/bulmalite';

Or load individual styles

import'node_modules/bulmalite/sass/components/dropdown.scss';

@import'node_modules/bulmalite/sass/components/dropdown';

Docs

Documentation is under development in the /docs/ folder.

Development

Bulmalite is developed using TypeScript. View models use the composition API and are contained in a separate .ts file.

Compile the TypeScript files with either tsc -d. To transfer the .vue template files from /src to /lib you can use the included script by running npm run collect. npm run build takes care of both steps.