Installation

npm install @kizmann/nano-ui [or] yarn add @kizmann/nano-ui

Dependencies

This package is dependent of @kizmann/pico-js as well as moment.

Global Usage

<script src="//unpkg.com/@kizmann/nano-ui@latest/dist/nano-ui.browser.js"></script>
<link rel="stylesheet" href="//unpkg.com/@kizmann/nano-ui@latest/dist/nano-ui.css">
<link rel="stylesheet" href="//unpkg.com/@kizmann/nano-ui@latest/dist/themes/light.css">

App.use(nano.Install);

Module Usage

import { Install } from "@kizmann/nano-ui";

App.use(Install);

@import "@kizmann/nano-ui/nano/index.scss";

Demo

Click me to see demo :cat:

ES5/6 Precompile

Incase you are not using the babel plugins (ES6) used in babel.config.js you will encounter errors while compiling. To prevent that its required to add an alias to your webpack.config.js.

webpack.config.js

module.exports = {
    resolve: {
        alias: {
            '@kizmann/nano-ui': '@kizmann/nano-ui/dist/nano-ui.esm.js'
        }
    }
}

webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            '@kizmann/nano-ui': '@kizmann/nano-ui/dist/nano-ui.esm.js'
        }
    }
});

Visual Studio Code Autocomplete

When using VS Code with the ES5 fix from above you need to create or add to your existsing jsconfig.json this alias to enable correct autocomplete.

jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@kizmann/nano-ui": ["node_modules/@kizmann/nano-ui/src/index.js"]
    }
  }
}