Keen UI is a lightweight Vue.js UI library with a simple API. The design is inspired by Google's Material Design. However, Keen UI is not meant to be a full implementation of the Material Design spec.
IE 10+ (due to Flexbox support).
npm install keen-ui --save
Before using Keen UI, ensure that the following CSS resets are applied to your site.
You can add the reset to your stylesheet (before other styles). 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.
Use as a plugin (registers all components with Vue globally):
;;;Vue;components:// all Keen UI components already registered;
Use individual components:
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 globally via
<!-- Place this in the <head> --><!-- Place this in the <body> -->Hello world!
Each component has been built into a standalone file with CSS included. You can use individual standalone components without importing the rest of the library. The standalone components are located in the
NOTE: Standalone component files each contain their own dependencies and a lot them contain overlapping dependencies. As such, using multiple standalone files 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.
;; // Required when using standlone components, should be imported only once in your project;components:UiButton;
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.