Keen UI

Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design.

_{Keen UI is not a CSS framework. Therefore, it doesn't include styles for a grid system, typography, etc. Instead, the focus is on interactive components that require Javascript. You should be able to use Keen UI with any page layout, structure, or CSS framework.}

Documentation and demo

http://josephuspaye.github.io/Keen-UI/

Requirements

Vue.js (^v2.1.4) - use keen-ui@0.8.9 for Vue 1.x support.

Optional

Material Icons font

Browser support

IE 10+ (due to Flexbox support).

Installation

npm install keen-ui --save

Usage

CSS Reset

Before using Keen UI, ensure that the following CSS resets are applied to your site.

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

You can add the reset to your stylesheet (before other styles). If you are using a CSS framework, check to see if the framework already includes a reset (most CSS frameworks do). The root font size set on <html> can be customized to globally resize the components.

ES6

Use as a Vue plugin (globally registers all components):

import Vue from 'vue';
import KeenUI from 'keen-ui';
import 'keen-ui/dist/keen-ui.css';

Vue.use(KeenUI);

new Vue({
    components: {
        // all Keen UI components already registered
    }
});

Use individual components:

import Vue from 'vue';
import { UiAlert, UiButton } from 'keen-ui';

new Vue({
    components: {
        UiAlert,
        UiButton
    }
});

Script tag

First, add a stylesheet link to the Keen UI CSS file in dist/keen-ui.min.css. Then, add a script tag pointing to dist/keen-ui.min.js after adding Vue.

If Keen UI detects the global Vue object, all components will be registered automatically. The components will also be made available globally via window.KeenUI.

Example:

<!-- Place this in <head> -->
<link rel="stylesheet" href="path/to/keen-ui.min.css">

<!-- Place this in <body> -->
<div id="app">
    <ui-button>Hello world!</ui-button>
</div>

<script src="path/to/vue.js"></script>
<script src="path/to/keen-ui.min.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            // all Keen UI components already registered
        }
    });
</script>

Customization

You can customize many aspects of Keen UI, including theme colors, component sizes, default props, and more.

See Customization.

Using standalone components

Each component is built into a standalone file with the necessary CSS included. You can use these individual standalone components without importing the rest of the library. The standalone components are located in the lib/ folder.

NOTE: Standalone component files each contain their own dependencies, and many contain overlapping dependencies. As a result, using multiple standalone files may increase the size of your bundle due to duplicate code.

import Vue from 'vue';
import 'keen-ui/src/bootstrap'; // Required when using standalone components, should be imported only once in your project
import UiButton from 'keen-ui/lib/UiButton';

new Vue({
    components: {
        UiButton
    }
});

Licence

Keen UI is open source and released under the MIT Licence.

PS: Made something cool with Keen UI? I would love to know! Tweet to me at @JosephusPaye.

kieutrongthien/Keen-UI