v1.0 · Stable

Introduction

A complete CSS + JS framework: ready-made components, a flexible grid and native dark mode — fully brandable.

Nexigrid is a CSS + JS framework for building modern, accessible, customizable interfaces. No build step, no config: link two files and start writing ng- classes. What you write is what you ship.

CSS-only components work instantly; interactive ones mount themselves on load. The system is driven by design tokens, so rebranding means overriding a few variables, not rewriting CSS.

What you get

Ready components

Buttons, cards, tables and more, accessible by default. Nothing to style by hand to get going.

Flexible grid

Two complementary systems: Flex for 12-column layouts, Lanes for auto-flow grids and dashboards.

Native dark mode

Light and dark with a single data-theme attribute, or via JS with ng.theme. No duplicate CSS.

Fully brandable

Override the design tokens (--ng-*) and the whole system adapts to your brand in minutes.

Key concepts

Four rules run through the whole framework. Keep them in mind and the rest follows.

  • ng- prefix
    Every class starts with ng- and uses dashes only — never BEM __/--. The pattern is ng-<block>-<variant>-<modifier>, with the color before the modifier: ng-btn-primary-outline, not ng-btn-outline-primary.
  • Design tokens
    Spacing, colors, radii, typography and breakpoints all come from --ng-* CSS variables — nothing is hardcoded. Override a handful of them and the whole system re-themes to your brand, with no CSS to rewrite.
  • Flex vs Lanes
    Two separate grid systems that coexist. Flex (ng-row + ng-col-*) is for classic 12-column layouts; Lanes (ng-grid + ng-lanes-*) is for auto-flow grids, cards and dashboards. Pick one per level — never mix ng-row and ng-grid at the same level.
  • Component contract
    CSS-only components (badge, card…) render the moment the page loads. Interactive ones mount themselves as soon as their ng_<name>.js is linked — no manual init, no data-ng-uid to write — and expose a runtime API at ng.<name>.