A lightweight but collection of essential UI components written with Vue and inspired by Material Design.
Keen UI is designed to be a lightweight Vue.js UI library 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 (^v2.1.0) - use [email protected] for Vue 1.x support.
Optional
- Roboto web font (Normal 400, Medium 500)
- Material Icons web font
IE 10+ (due to Flexbox support).
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 following instructions can also be used with CommonJS by replacing the ES6-specific syntax with the CommonJS equivalent.
Use as a plugin (registers all components globally):
import Vue from 'vue';
import Keen from 'keen-ui';
Vue.use(Keen);
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
}
});First, add a link to the Keen UI CSS file in dist/keen-ui.css. Then, add a script tag pointing to dist/keen-ui.js after adding Vue.
If Keen UI detects Vue on the window object, all the components will be automatically registered. The components are also made available on the global window.Keen object.
Example:
<html>
<head>
...
<link rel="stylesheet" href="path/to/keen-ui.css">
...
</head>
<body>
<div id="app">
<ui-button>Hello world!</ui-button>
</div>
<script src="path/to/vue.js"></script>
<script src="path/to/keen-ui.js"></script>
<script>
new Vue({
el: '#app',
components: {
// all Keen UI components already registered
}
});
</script>
</body>
</html>Each component has been compiled as a self-contained file which you can use without importing the rest of the library. 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 overlapping dependencies. 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.
The following instructions can also be used with CommonJS by replacing the ES6-specific syntax with the CommonJS equivalent.
import Vue from 'vue';
import UiButton from 'keen-ui/lib/UiButton';
new Vue({
components: {
UiButton
}
});- Test browser compatibility (IE 10+)
- Add new components
- Tooltip
- Slider
- Select
- Datepicker
- Add theming guide
- Add unit tests
Keen UI is open source and released under the MIT Licence.
Copyright (c) 2016-2017 Josephus Paye II.