A lightweight but complete collection of essential UI components written with Vue and inspired by Material Design.
Keen UI 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 UI is not meant to be a full implementation of the spec.
Keen UI 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.
http://josephuspaye.github.io/Keen-UI/
- Vue.js (^v1.0.21)
- Material Icons Web Font
Optional
- Roboto Web Font (Normal 400, Medium 500)
IE 9+ (currently only tested in Chrome)
npm install keen-ui --savebower install keen-ui --saveMake sure to include the
dist/keen-ui.cssfile if you are not using individual components fromlib/as the styles have been extracted into a single CSS file.
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
}
});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
}
});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
}
});Each component has been built as a self-contained file 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 inlined.
NOTE: Files in the lib/ contain all their own dependencies and a lot them contain the same dependencies. For example, UiAlert in lib/ also includes a copy of UiIconButton, which includes UiMenu, UiPopover, UiIcon and UiTooltip, etc. As such, using multiple files from lib/ could significantly increase the size of your bundle due to duplicate code, and is only recommended if you are using just a handful of components.
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>var Vue = require('vue');
var UiButton = require('keen-ui/lib/UiButton');
new Vue({
el: 'body',
components: {
'ui-button': UiButton
}
});import Vue from 'vue';
import UiButton from 'keen-ui/lib/UiButton';
new Vue({
components: {
UiButton
}
});- Test browser compatibility (IE 9+)
- Add new components
- Tooltip
- Slider
- Select
- Datepicker
- Add customization guide
- Add unit tests
Keen UI is open source and released under the MIT Licence.
Copyright (c) 2016 Josephus Paye II