Nucleus-ui-kit NPM

Nucleus UI Kit

The central and most important part of an object, movement, or group, forming the basis for its activity and growth.

npm.io

Check out the awesome animating logo here

The Nucleus UI Kit is designed to be the centerpiece of our front-end work over at Temper. It is a UI library based on Vue.js with a simple API. Its designed is inspired by Material Design with a big influence of our amazing designers. The Nucleus UI Kit is no exact implementation of the Material design spec.

Documentation and demo

http://temperworks.github.io/Nucleus

Requirements

Vue.js (^v2.1.4)

Optional

Material Icons font

Browser support

IE 10+ (due to Flexbox support).

Installation

NPM (recommended)

npm install nucleus-ui-kit --save

Building from source

Download source
Run

npm build:all

Build files can be found in dist/

Usage

Make sure to include either the dist/nucleus-ui-kit.css or dist/nucleus-ui-kit.min.css file if you are not using individual components from lib/ as the styles have been extracted into a single CSS file.

CSS Reset

Before using Nucleus, 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.

ES6

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 NucleusUI from 'nucleus-ui-kit';

Vue.use(NucleusUI);

new Vue({
    components: {
        // all Nucleus UI Kit components already registered
    }
});

Use individual components:

import Vue from 'vue';
import { UiAlert, UiButton } from 'nucleus-ui-kit';

new Vue({
    components: {
        UiAlert,
        UiButton
    }
});

Globals (script tag)

First, add a stylesheet link to the Nucleus CSS file in dist/nucleus-ui-kit.min.css. Then, add a script tag pointing to dist/nucleus-ui-kit.min.js after adding Vue.

If Nucleus detects Vue globally, all the components will be registered automatically. The components will also be made available on the global window.Nucleus object.

Example:

<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/nucleus-ui-kit.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/nucleus-ui-kit.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            components: {
                // all Nucleus components already registered
            }
        });
    </script>
</body>
</html>

Using standalone individual components

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.

ES6

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue';
import 'nucleus-ui-kit/src/bootstrap'; // Required when using components from `lib/`, should be imported only once in your project
import UiButton from 'nucleus-ui-kit/lib/UiButton';

new Vue({
    components: {
        UiButton
    }
});