Getting Started

Installation

Drop two files into your page and start writing ng- classes. No build step, no bundler, no dependencies.

Nexigrid ships as plain files: one stylesheet and a couple of JavaScript modules. Copy the dist into your project and link it — there is nothing to compile.

1 · Add styles & scripts

Link the stylesheet in the <head>:

index.html

<!-- in <head> -->
<link rel="stylesheet" href="/assets/css/nexigrid.css">

Then the scripts before </body>, in this order: ng_core.js first — it mounts the components already in the page and auto-enables the observer — then the components (one ng_<component>.js per interactive component you use, or the ng-all.min.js bundle with every component), and finally ng_observer.js, which mounts markup added at runtime. You don't call observer.enable() yourself: linking the file is enough.

index.html

<!-- before </body> -->

<!-- 1) core — always first -->
<script type="module" src="/assets/js/ng_core.js"></script>

<!-- 2) components — either pick the ones you use… -->
<script type="module" src="/assets/js/ng_dropdown.js"></script>
<script type="module" src="/assets/js/ng_modal.js"></script>
<!-- …or load them all in one minified bundle -->
<script type="module" src="/assets/js/ng-all.min.js"></script>

<!-- 3) observer — last; core enables it automatically -->
<script type="module" src="/assets/js/ng_observer.js"></script>

2 · File structure

The framework is a folder of static files — no bundler required.

project

assets/
  css/
    nexigrid.css
  js/
    ng_core.js          # boot + initial mount
    ng_observer.js      # mounts runtime-added markup
    ng_<component>.js   # one per component
    ng-all.min.js       # or all components, minified
  fonts/
    inter/   phosphor/

3 · Your first component

Write the markup with ng- classes. CSS-only components render instantly:

index.html

<button class="ng-btn ng-btn-primary">Get started</button>
<span class="ng-badge ng-badge-success-soft">Ready</span>

Live preview

Ready

4 · Interactive components

Interactive components (dropdown, modal, tabs, accordion…) need their own ng_<component>.js. Once linked, they mount automatically — no manual init, no data-ng-uid to write. Browse the full list in Components.

5 · Dark mode

Switch theme with a single data-theme attribute, or toggle it from JS via ng.theme.

theme

<!-- default theme on the html tag -->
<html data-theme="dark"> … </html>

<!-- or toggle it from JS -->
<button data-theme-toggle>Toggle theme</button>

6 · Source code

Clone the repository or browse the code on GitHub.

terminal

git clone https://github.com/DevonMax/nexigrid.git

View on GitHub