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
- Vue.js (^v1.0.21)
- Material Icons Web Font
Optional
- Roboto Web Font (Normal 400, Medium 500)
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 fromlib/
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
- Datepicker
- Add customization guide
- Add unit tests
Licence
Keen UI is open source and released under the MIT Licence.
Copyright (c) 2016 Josephus Paye II