A lightweight 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.4) - use keen-ui@0.8.9 for Vue 1.x support.
Optional
- Roboto font (Normal 400, Medium 500)
- Material Icons font
IE 10+ (due to Flexbox support).
npm install keen-ui --savebower install keen-ui --saveMake sure to include either the
dist/keen-ui.cssordist/keen-ui.min.cssfile if you are not using individual components fromlib/as the styles have been extracted into a single CSS file.
Before using Keen UI, ensure that the following CSS resets are applied to your site.
*, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; }You can add it to your stylesheet manually (before other styles), or, if you are using a CSS framework, check to see if the framework already includes a reset (most CSS frameworks do). The root font size can be customized to globally resize the components.
The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.
Use as a plugin (registers all components with Vue globally):
import Vue from 'vue'; import KeenUI from 'keen-ui'; Vue.use(KeenUI); 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 stylesheet link to the Keen UI CSS file in dist/keen-ui.min.css. Then, add a script tag pointing to dist/keen-ui.min.js after adding Vue.
If Keen UI detects Vue globally, all the components will be registered automatically. The components will also be made available on the global window.KeenUI object.
Example:
<html> <head> ... <link rel="stylesheet" href="path/to/keen-ui.min.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.min.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 which will be added as <style> tags in <head>.
NOTE: Files in the lib/ folder contain all their own dependencies and a lot them contain overlapping dependencies. As such, using multiple files from lib/ could significantly increase the size of your bundle due to duplicate code, and is not recommended unless you are using only a handful of components. This may be fixed by minification, but I haven't tested.
The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.
import Vue from 'vue'; import 'keen-ui/src/bootstrap'; // Required when using components from `lib/`, should be imported only once in your project import UiButton from 'keen-ui/lib/UiButton'; new Vue({ components: { UiButton } });- Test browser compatibility (IE 10+)
- Chrome, IE, Edge, Firefox on Windows
- Chrome, Safari, Firefox on macOS
- Add new components
- Tooltip
- Slider
- Select
- Datepicker
- File upload
- Add customization guide
- Add unit tests
Keen UI is open source and released under the MIT Licence.
Copyright (c) 2016-2017 Josephus Paye II.
PS: I would love to know how you're using Keen UI. Tweet to me at @JosephusPaye.