BalmUI

Next Generation Material UI for Vue.js

What is BalmUI?

Following the Material Design UI components for the web specification, we developed the BalmUI library that contains a set of high quality components and demos for building rich, interactive user interfaces.

Documentation & Demos

Quick Start

0. Requirement

• BalmJS(Recommended) or other toolchains
• Vue.js@2.1.0+

1. Install

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

2. Config

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

/* Add BalmUI styles */
@import 'node_modules/balm-ui/src/styles/balm-ui.scss';

Download Material Design Icons and extract to /path/to/my-project/app/fonts.

3. Usage

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

3.1 Default Usage

import Vue from 'vue';
import BalmUI from 'balm-ui'; // Mandatory
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // Optional

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

3.2 Standalone Usage

import Vue from 'vue';
import UiButtonComponents from 'balm-ui/components/button';

// (Recommended) Splitting CSS out from the main application, see BalmUI advanced usage.
import 'balm-ui/components/core.css';
import 'balm-ui/components/button.css';
import 'balm-ui/components/icon.css'; // Optional.

Vue.use(UiButtonComponents);

Enjoy 👻

Reusability & Composition

Components

• General
  • Button
  • Floating Action Button
  • Icon Button
  • Icon (Material icons)
• Layout
  • Top App Bar
  • Layout Grid
  • Tabs
• Navigation
  • Drawer
  • Menu
• Data Entry
  • Text Field
  • Select
  • Checkbox
  • Radio
  • Switch
  • Slider
  • File (💡)
  • Autocomplete (💡)
  • Datepicker (💡)
  • Rangepicker (💡)
• Data View
  • List
  • Grid List (💀)
  • Image List (migrate from Grid List)
  • Card
  • Chips
  • Data Table
  • Pagination (💡)
  • Text Divider (💡)
• Feedback
  • Dialog
  • Snackbar
  • Linear Progress
  • Skeleton (💡)

Plugins

• Event (💡)
• Grid
• Typography
• Theme
• Validator (💡)
• Alert (💡)
• Confirm (💡)
• Toast (💡)

Directives

• Ripple
• Elevation
• A11y
• Anchor (💡)

Utilities (💡)

• Type Detections
• Helper Functions
• IE Detection

💡: Plus UI, 💀: Deprecated

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

• BalmJS
• Vue.js
• MDC Web

License