Vulmajs

Lightweight UI components and design system for Vue.js

Version: 1.0.24 Updated: 02/21/2020

By: vulmajs License: MIT

Downloads Last 30 Days: 51

Install

npm i vulmajs
yarn add vulmajs

Repository: https://github.com/vulmajs/vulma

CDNs

bundle.run: https://bundle.run/vulmajs

jsDelivr: https://cdn.jsdelivr.net/npm/vulmajs

unpkg: https://unpkg.com/vulmajs

THIS SYSTEM IS NO LONGER MAINTAINED

VulmaJs is a lightweight UI library of responsive components for Vue.js based on Bulma framework and design system, with code style guides.

Features

  • Keep your current Bulma theme / variables easily
  • Supports both Material Design Icons and FontAwesome
  • Very lightweight with none internal dependencies aside from Vue & Bulma
  • About 60KB min+gzip (with Bulma included)
  • Semantic code output
  • Follows Bulma design and some of the Material Design UX
  • Focus on usability and performance without over-animating stuff

Documentation

The documentation is in the docs directory, it serves as the demo as well.

Browse online documentation here.

Quick start

You need Vue.js version 2.5+.

1 Install via npm

npm install vulmajs

or

yarn add vulmajs

2 Import and use Vulmajs

import Vue from 'vue';
import Vulmajs from 'vulmajs';
import 'vulmajs/lib/vulmajs.css';

Vue.use(Vulmajs);

// OR

Vue.component(Vulmajs.Checkbox.name, Vulmajs.Checkbox);
Vue.component(Vulmajs.Table.name, Vulmajs.Table);
Vue.component(Vulmajs.Switch.name, Vulmajs.Switch);

3 Include Material Design Icons

<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">

If you want to customize the icons or the theme, refer to the customization section on the documentation.

Alternatively, you can use a CDN or even download

<!-- VulmaJs CSS -->
<link rel="stylesheet" href="https://unpkg.com/vulmajs/lib/vulmajs.min.css">

<!-- VulmaJs JavaScript -->
<script src="https://unpkg.com/vulmajs"></script>
// Global variable
Vue.use(Vulmajs.default)

Browser support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.

Versioning

While it's still in beta, version will follow v0.Y.Z, where:

  • Y: Major (breaking changes)
  • Z: Minor or patch

Current roadmap

https://github.com/vulmajs/vulma/

Stay in touch

License

Code released under MIT license.

Copyright (c) 2018, Ronni H. Baslund.

Categories: Vue js