Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details

All Projects → balmjs → Balm Ui

balmjs / Balm Ui

Licence: mit

♦️ A modular and customizable UI library based on Material Design and Vue

Programming Languages

javascript

184084 projects - #8 most used programming language

Labels

css vue web material-design scss vue-components design-systems ui-kit material-components

Projects that are alternatives of or similar to Balm Ui

Vuetify

🐉 Material Component Framework for Vue

Stars: ✭ 33,085 (+24775.94%)

Mutual labels: material-design, ui-kit, vue-components, material-components

Vue Material Kit

Vue Material Kit - Open Source Material Design UI Kit

Stars: ✭ 231 (+73.68%)

Mutual labels: material-design, ui-kit, vue-components, scss

Viewui

A high quality UI Toolkit built on Vue.js 2.0

Stars: ✭ 2,487 (+1769.92%)

Mutual labels: design-systems, ui-kit, vue-components

Vue Material Dashboard

Vue Material Dashboard - Open Source Material Design Admin

Stars: ✭ 403 (+203.01%)

Mutual labels: material-design, vue-components, scss

Quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time

Stars: ✭ 20,090 (+15005.26%)

Mutual labels: material-design, vue-components, material-components

Svelte Materialify

A Material UI Design Component library for Svelte heavily inspired by vuetify.

Stars: ✭ 351 (+163.91%)

Mutual labels: material-design, ui-kit, material-components

Iview

A high quality UI Toolkit built on Vue.js 2.0

Stars: ✭ 23,930 (+17892.48%)

Mutual labels: design-systems, ui-kit, vue-components

React Native Paper

Material Design for React Native (Android & iOS)

Stars: ✭ 8,714 (+6451.88%)

Mutual labels: material-design, ui-kit

Vuestic Admin

Free and Beautiful Vue 3 Admin Template

Stars: ✭ 8,398 (+6214.29%)

Mutual labels: ui-kit, vue-components

Shards Dashboard

🔥A beautiful Bootstrap 4 admin dashboard templates pack.

Stars: ✭ 1,143 (+759.4%)

Mutual labels: material-design, ui-kit

Cyanea

A theme engine for Android

Stars: ✭ 1,319 (+891.73%)

Mutual labels: material-design, material-components

Material Design Lite

Material Design Components in HTML/CSS/JS

Stars: ✭ 31,931 (+23908.27%)

Mutual labels: material-design, material-components

Matter

Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰

Stars: ✭ 888 (+567.67%)

Mutual labels: material-design, material-components

Material Components Web Elm

Material Components for Elm

Stars: ✭ 73 (-45.11%)

Mutual labels: material-design, material-components

Material Design For Bootstrap

Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.

Stars: ✭ 9,463 (+7015.04%)

Mutual labels: material-design, ui-kit

Design System Starter

🚀 The Australian Government Design System - Starter

Stars: ✭ 61 (-54.14%)

Mutual labels: design-systems, scss

Material Components

Documentation and policies for Material Components (all platforms)

Stars: ✭ 872 (+555.64%)

Mutual labels: material-design, material-components

Interior

Design system for the modern web.

Stars: ✭ 77 (-42.11%)

Mutual labels: design-systems, scss

Maz Ui

Stand-alone components library to build your interfaces with Vue.JS & Nuxt.JS

Stars: ✭ 109 (-18.05%)

Mutual labels: vue-components, scss

Mediapicker

Easy customizable picker for all your needs in Android application

Stars: ✭ 105 (-21.05%)

Mutual labels: material-design, material-components

View All Similar Projects ➔

BalmUI

Next Generation Material UI for Vue.js

Introduction

BalmUI is a modular and customizable Material Design UI library for Vue.js.

🎉 NOW, [email protected] (v9.0) supports for Vue 3.0

Features

Enterprise-class UI designed for web applications
A set of high-quality Vue components/plugins/directives/utils out of the box
Powerful theme customization in every detail
Integrated a complete set of the latest Material Icons
All components and plugins is highly customizable, and can be used individually

Documentation & Demos

Visit material.balmjs.com
Visit next-material.balmjs.com (for Vue 3.0)

Quick Start

Requirements

[email protected]+
🚀 Balm CLI(Recommended) or Vue CLI or other toolchains

1. For Balm CLI (Recommended)

1.0 Create a project

balm init vue my-project
cd my-project

1.1 Installing `balm-ui`

yarn add balm-ui
# OR
npm install --save balm-ui

1.2 Configuration

update balm.config.js

get Material Icons without downloading (or, download and extract to my-project/app/fonts)

const api = (mix) => {
  if (mix.env.isDev) {
    mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');
  }
};

edit my-project/config/balmrc.js for using Dart Sass

module.exports = {
  styles: {
    extname: 'scss',
    dartSass: true
  }
  // Other Options...
};

1.3 Usage

Default Usage

edit my-project/app/styles/global/_vendor.scss
```
/* import BalmUI styles */
@use 'balm-ui/dist/balm-ui';
```
Recommend to use Sass in /path/to/project-name/styles/_vendor.scss, and you can use more advanced style usage of the BalmUI.

edit my-project/app/scripts/main.js

import Vue from 'vue';
import BalmUI from 'balm-ui'; // Official Google Material Components
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional

Standalone Usage

edit my-project/app/styles/global/_vendor.scss

@use 'balm-ui/components/core';
@use 'balm-ui/components/button/button';
@use 'balm-ui/components/icon/icon';
@use 'balm-ui/components/dialog/dialog';
@use 'balm-ui/plugins/alert/alert';

edit my-project/app/scripts/main.js

import Vue from 'vue';
import UiButton from 'balm-ui/components/button';
import $alert from 'balm-ui/plugins/alert';

Vue.use(UiButton);
Vue.use($alert);

1.4 Development and testing

npm run dev

edit a vue component: my-project/app/scripts/views/components/hello.vue

<template>
  <div class="hello">
    ...
    <!-- Add a test button -->
    <ui-button @click="$alert('Hello BalmUI')">Click Me</ui-button>
  </div>
</template>

1.5 Bundling and deployment

npm run prod

2. For Vue CLI

2.0 Create a project

vue create my-project
cd my-project

2.1 Installing `balm-ui`

yarn add balm-ui
# OR
npm install --save balm-ui

2.2 Configuration

edit my-project/vue.config.js

module.exports = {
  runtimeCompiler: true,
  // NOTE: set alias via `configureWebpack` or `chainWebpack`
  configureWebpack: {
    resolve: {
      alias: {
        'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',
        'balm-ui-css': 'balm-ui/dist/balm-ui.css'
      }
    }
  }
  // chainWebpack: (config) => {
  //   config.resolve.alias
  //     .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')
  //     .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');
  // }
};

2.3 Usage

edit my-project/src/main.js

import Vue from 'vue';
import App from './App.vue';

import BalmUI from 'balm-ui'; // Official Google Material Components
import BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components
import 'balm-ui-css';

Vue.config.productionTip = false;

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional

new Vue({
  render: (h) => h(App)
}).$mount('#app');

3. For `<script>`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello BalmUI</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"
    />
  </head>
  <body>
    <div id="app">
      <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello BalmUI'
        }
      });
    </script>
  </body>
</html>

Enjoy 👻

Contributing

We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.

Browser support

We officially support the last two versions of every major browser. Specifically, we test on the following browsers:

Chrome on Android, Windows, macOS, and Linux
Firefox on Windows, macOS, and Linux
Safari on iOS and macOS
Edge on Windows
IE 11 on Windows

Special Thanks to

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 133

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (5) 🔗

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

balmjs / Balm Ui

Programming Languages

Labels

Projects that are alternatives of or similar to Balm Ui

BalmUI

Introduction

Features

Documentation & Demos

Quick Start

Requirements

1. For Balm CLI (Recommended)

1.0 Create a project

1.1 Installing balm-ui

1.2 Configuration

1.3 Usage

Default Usage

Standalone Usage

1.4 Development and testing

1.5 Bundling and deployment

2. For Vue CLI

2.0 Create a project

2.1 Installing balm-ui

2.2 Configuration

2.3 Usage

3. For <script>

Contributing

Browser support

Special Thanks to

1.1 Installing `balm-ui`

2.1 Installing `balm-ui`

3. For `<script>`