npm package: @ndiing/ndiing
Description: Ndiing UI
Author: Ridho Prasetya
Latest version: 2.0.0

<a name="Ndiing"></a>

[![](https://img.shields.io/github/v/release/ndiing/ndiing.svg)](https://github.com/ndiing/ndiing/releases)
[![](https://img.shields.io/github/license/ndiing/ndiing.svg)](https://github.com/ndiing/ndiing/blob/master/LICENSE)
[![](https://img.shields.io/badge/ndiing-docs-blue.svg)](https://ndiing.github.io/ndiing/docs/)
[![](https://img.shields.io/badge/master-changelog-blue.svg)](https://github.com/ndiing/ndiing/blob/master/CHANGELOG.md)
[![](https://data.jsdelivr.com/v1/package/gh/ndiing/ndiing/badge)](https://www.jsdelivr.com/package/gh/ndiing/ndiing)

# Ndiing UI

A lightweight and modular front-end framework
for developing fast and powerful web interfaces.

## Important links
* [Material Design](https://material.io/) for our design implementation, used for every component :)
* [LitElement](https://github.com/polymer/lit-element) for our web component foundation, used in `NgElement`
* [PouchDB](https://github.com/pouchdb/pouchdb) for our `indexeddb` proxy, used in `NgIndexedDBProxy` as `indexeddb`

## Quick start

### Using via CDN
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ndiing/ndiing/resources/ndiing.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/gh/ndiing/ndiing/resources/ndiing.js" type="module"></script>
</body>
</html>
```

## Components
All component classes are exported in each folder, 
but also imported all in `ndiing.js` except modules

Name | Status
--- | ---
[layout](./resources/layout) | `Ready`
[layout-column](./resources/layout/layout-column) | `Ready`
[layout-grid](./resources/layout/layout-grid) | `Ready`
[color](./resources/color) | `Ready`
[elevation](./resources/elevation) | `Ready`
[typography](./resources/typography) | `Ready`
[button](./resources/button) | `Ready`
[fab](./resources/fab) | `Ready`
[icon](./resources/icon) | `Ready`
[list](./resources/list) | `Ready`
[list-item](./resources/list-item) | `Ready`
[menu](./resources/menu) | `Ready`
[menu-item](./resources/menu/menu-item) | `Ready`
[navigation-drawer](./resources/navigation-drawer) | `Ready`
[tab](./resources/tab) | `Ready`
[tab-bar](./resources/tab/tab-bar) | `Ready`
[dialog](./resources/dialog) | `Ready`
[picker](./resources/picker) | `Ready`
[progress](./resources/progress) | `Ready`
[side-sheet](./resources/side-sheet) | `Ready`
[snackbar](./resources/snackbar) | `Ready`
[tooltip](./resources/tooltip) | `Ready`
[top-app-bar](./resources/top-app-bar) | `Ready`
[data-table](./resources/data-table) | `Ready`
[pagination](./resources/pagination) | `Ready`
[toolbar](./resources/toolbar) | `Ready`
[form](./resources/form) | `Ready`
[date-field](./resources/date-field) | `Ready`
[email-field](./resources/email-field) | `Ready`
[number-field](./resources/number-field) | `Ready`
[password-field](./resources/password-field) | `Ready`
[search-field](./resources/search-field) | `Ready`
[tel-field](./resources/tel-field) | `Ready`
[text-field](./resources/text-field) | `Ready`
[select](./resources/select) | `Ready`
[select-option](./resources/select/select-option) | `Ready`
[textarea](./resources/textarea) | `Ready`
[checkbox](./resources/checkbox) | `Ready`
[radio](./resources/radio) | `Ready`
[switch](./resources/switch) | `Ready`
[backdrop](./resources/backdrop) | `Planned`
[banner](./resources/banner) | `Planned`
[bottom-app-bar](./resources/bottom-app-bar) | `Planned`
[bottom-navigation](./resources/bottom-navigation) | `Planned`
[bottom-sheet](./resources/bottom-sheet) | `Planned`
[card](./resources/card) | `Planned`
[chip](./resources/chip) | `Planned`
[divider](./resources/divider) | `Planned`
[image-list](./resources/image-list) | `Planned`
[navigation-rail](./resources/navigation-rail) | `Planned`
[slider](./resources/slider) | `Planned`


## Modules
All module are imported and exported in `modules/index.js`,
and please avoid using `Deprecated` status, for soon-to-be removed features.

Name | Status
--- | ---
[foundation](./resources/foundation) | `Ready`
[popper](./resources/popper) | `Ready`
[ripple](./resources/ripple) | `Ready`
[router](./resources/router) | `Ready`
[array-store](./resources/store/array-store) | `Deprecated`
[data-model](./resources/store/data-model) | `Deprecated`
[tree-store](./resources/store/tree-store) | `Deprecated`
[field](./resources/data/field) | `Ready`
[schema](./resources/data/schema) | `Ready`
[model](./resources/data/model) | `Ready`
[proxy](./resources/data/proxy) | `Ready`
[store](./resources/data/store) | `Ready`

## Misc
- [showdownjs](https://github.com/showdownjs/showdown) convert md to html used for our docs
- [highlightjs](https://github.com/highlightjs/highlight.js) highlight code inside our docs
- [jsdoc2md](https://github.com/jsdoc2md/jsdoc-to-markdown) generate jsdoc to md for our docs
- [github](https://github.com/) you know it is