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.
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
}
});define(['keen-ui'], function(Keen) {
new Vue({
components: {
'ui-button': Keen.UiButton
}
});
});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.
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
}
});- Add CodePen demos
- 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