/keen-ui

A collection of essential UI components written with Vue and inspired by Material Design

Primary LanguageVueMIT LicenseMIT

Keen UI

A collection of essential UI components written with Vue and inspired by Material Design.

Keen is designed to be a lightweight but complete Vue.js UI framework with a simple API. Though the design is inspired by Google's Material Design, Keen is not meant to be a full implementation of the spec.

Keen is not a CSS framework, and as such you won't find a grid system or styles for typography in it. Instead, the focus is on creating reusable components that have interactivity.

Documentation and Demo

http://josephuspaye.github.io/keen-ui/

Requirements

Optional

Browser Support

IE 9+ (currently only tested in Chrome)

Installation

NPM

npm install keen-ui --save

Bower

bower install keen-ui --save

Usage

Make sure to include the dist/keen-ui.css file if you are not using individual components from lib/ as the styles have been extracted into a single CSS file.

Globals (script tag)

The keen-ui.js file in the dist folder contains all the components exported on a global window.Keen object.

First, include the JS and CSS files in your page:

<html>
<head>
    ...
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="path/to/keen-ui.css">
    ...
</head>
<body>
    <!-- Example usage of UiButton -->
    <ui-button>Say Hello</ui-button>

    <script src="path/to/vue.js"></script>
    <script src="path/to/keen-ui.js"></script>
    <script src="path/to/app.js"></script>
</body>
</html>

Then, register the components globally for use in your templates:

// app.js

Vue.use(Keen);

new Vue({
    el: 'body',
    components: {
        // all components already registered
    }
});

CommonJS

Use as a plugin (registers all components globally):

var Vue = require('vue');
var Keen = require('keen-ui');

Vue.use(Keen);

new Vue({
    el: 'body',
    components: {
        // all components already registered
    }
});

Use individual components:

var Vue = require('vue');
var UiButton = require('keen-ui').UiButton;

new Vue({
    el: 'body',
    components: {
        'ui-button': UiButton
    }
});

ES6

Use as a plugin (registers all components globally):

import Vue from 'vue';
import Keen from 'keen-ui';

Vue.use(Keen);

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

Use individual components:

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

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

AMD

define(['keen-ui'], function(Keen) {
    new Vue({
        components: {
            'ui-button': Keen.UiButton
        }
    });
});

Using standalone individual components

Each component has been built as an standalone component which you can use without importing the rest of the framework. The standalone files are located in the lib folder and they contain their own CSS.

This is only recommended if you are using just a few components.

Globals (script tag)

Include the component JS file in your page and it will be available as the global Keen.[ComponentName].

<html>
<head>
    ...
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    ...
</head>
<body>
    <ui-button>Hello world!</ui-button>

    <script src="path/to/vue.js"></script>
    <script src="path/to/UiButton.js"></script>
    <script>
        new Vue({
            el: 'body',
            components: {
                'ui-button': Keen.UiButton
            }
        });
    </script>
</body>
</html>

CommonJS

var Vue = require('vue');
var UiButton = require('keen-ui/lib/UiButton');

new Vue({
    el: 'body',
    components: {
        'ui-button': UiButton
    }
});

ES6

import Vue from 'vue';
import UiButton from 'keen-ui/lib/UiButton';

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

Todo

  • Add CodePen demos
  • Test browser compatibility (IE 9+)
  • Add new components
    • Tooltip
    • Slider
    • Select
  • Add customization guide
  • Add unit tests

Licence

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

Copyright (c) 2016 Josephus Paye II