nodeglass

v0.1.2

Published

2 months ago

Lightweight glassmorphism layouts and utilities for the web.

0High
0Medium
0Low

mikehite

glassmorphism css ui layout utility frontend

NodeGlass

Lightweight glassmorphism helpers for the web. Drop in the CSS, tweak a couple variables, or generate glassy containers at runtime.

Features

Framework agnostic: vanilla JS, React, Vue, Svelte, or server-rendered HTML.
Zero dependencies, ESM-only.
Tunable via CSS variables or JS helpers for SSR/inline styles.
Includes ready-made utility classes (cards, grids, buttons, pills, hero blocks).
Layout shells for sites: sections/containers, split panels, navbar/footer shells, modal overlay.
Components: card headers/footers, glass lists, badges, tabs, inputs/forms, pill buttons with states.
Theme: built-in ng-theme-dark preset and JS helper to toggle it.

Install

npm install nodeglass

Quick start (vanilla)

[Prefer a short checklist? See docs/GETTING_STARTED.md. For a live gallery, open docs/demo.html.]

<head>
  <link rel="stylesheet" href="node_modules/nodeglass/styles.css">
  <style>
    body { background: radial-gradient(circle at 20% 20%, #dbeafe, #f8fafc); }
  </style>
</head>
<body>
  <section class="ng-glass ng-hero ng-grid">
    <div class="ng-glass ng-card ng-accent-1">
      <div class="ng-glass-content">
        <p class="ng-tag ng-muted">NodeGlass</p>
        <h2>Drop-in glass cards</h2>
        <p>Use the utilities or generate them from JS.</p>
        <button class="ng-glass ng-button ng-pill">Try it</button>
      </div>
    </div>
    <div class="ng-glass ng-card ng-accent-2">
      <div class="ng-glass-content">
        <h3>Customizable</h3>
        <p>Blur, opacity, highlights, and noise are all configurable.</p>
      </div>
    </div>
  </section>
</body>

JS helpers

import {
  injectNodeGlassStyles,
  applyNodeGlassTheme,
  createGlassElement,
  toggleNodeGlassDarkTheme,
} from "nodeglass";

// Add the base styles once (optional if you import the CSS file)
injectNodeGlassStyles();

// Override the defaults globally
applyNodeGlassTheme({
  blur: "24px",
  opacity: 0.16,
  backgroundRgb: "236, 246, 255",
  highlightRgb: "153, 208, 255",
});

// Make a card programmatically
const card = createGlassElement({ classes: ["ng-glass", "ng-card", "ng-accent-3"] });
card.querySelector(".ng-glass-content").innerHTML = `
  <h3>Programmatic glass</h3>
  <p>Rendered from NodeGlass helpers.</p>
`;
document.body.appendChild(card);

// Toggle dark mode on the root element
toggleNodeGlassDarkTheme();

Layout primitives

ng-section + ng-container: page sections with responsive padding and centered content.
ng-split + ng-split-pane: responsive two/three-column grids that collapse on mobile.
ng-navbar, ng-footer: shells with sane spacing/flex behavior.
ng-modal-overlay + ng-modal: overlay/backdrop and glass modal surface.
Components: ng-card-header/footer, ng-list + ng-list-item, ng-badge, ng-tabs + ng-tab, ng-input/textarea/select, ng-field, ng-label, ng-hint, ng-pill buttons with states.
Theme: ng-theme-dark class to switch the preset on any wrapper.

Example:

<header class="ng-glass ng-navbar ng-section tight">
  <div class="ng-glass-content ng-container">
    <div class="ng-stack center">
      <strong>NodeGlass</strong>
      <div class="ng-tag ng-muted">Glass layouts fast</div>
    </div>
    <nav class="ng-nav-links">
      <a class="ng-glass ng-button ng-pill" href="#features">Features</a>
      <a class="ng-glass ng-button ng-pill" href="#pricing">Pricing</a>
    </nav>
  </div>
</header>

<section class="ng-section" id="features">
  <div class="ng-container ng-split">
    <div class="ng-glass ng-card ng-split-pane">
      <div class="ng-glass-content ng-card-header">
        <h3>Split panels</h3>
        <span class="ng-badge">New</span>
      </div>
      <div class="ng-glass-content">
        <p>Auto-fit columns with consistent gaps.</p>
        <div class="ng-tabs">
          <button class="ng-tab is-active">Overview</button>
          <button class="ng-tab">API</button>
        </div>
      </div>
    </div>
    <div class="ng-glass ng-card ng-split-pane">
      <div class="ng-glass-content">
        <h3>Modal shell</h3>
        <p>Use <code>ng-modal-overlay</code> + <code>ng-modal</code> to stage dialogs.</p>
        <ul class="ng-list">
          <li class="ng-list-item">
            <span>List item</span>
            <span class="ng-badge">Badge</span>
          </li>
          <li class="ng-list-item">
            <span>Another item</span>
            <button class="ng-glass ng-button ng-pill">Action</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

React snippet

import { useEffect } from "react";
import { injectNodeGlassStyles, applyNodeGlassTheme } from "nodeglass";
import "nodeglass/styles.css";

export function Hero() {
  useEffect(() => {
    injectNodeGlassStyles();
    applyNodeGlassTheme({ blur: "24px", opacity: 0.17 });
  }, []);

  return (
    <section className="ng-glass ng-hero ng-grid">
      <div className="ng-glass ng-card ng-accent-1">
        <div className="ng-glass-content">
          <p className="ng-tag ng-muted">NodeGlass</p>
          <h2>Glass layouts in seconds</h2>
        </div>
      </div>
    </section>
  );
}

Options

You can override these via applyNodeGlassTheme, createGlassElement, or CSS variables:

| Option | Default | Description | | --- | --- | --- | | blur | "20px" | Backdrop blur amount | | opacity | 0.18 | Base background alpha | | radius | "18px" | Border radius | | border | "1px" | Border width | | shadow | 0 12px 42px ... | Box shadow | | backgroundRgb | "255, 255, 255" | Base background color (RGB) | | highlightRgb | "255, 255, 255" | Highlight color (RGB) | | noiseOpacity | 0.6 | Noise layer strength (used in --ng-noise-opacity) | | saturation | "135%" | Saturation boost |

Styling tips

Pair with soft gradients or darkened photo backdrops.
Use accent classes ng-accent-1/2/3 to quickly shift the palette.
For lighter cards, add ng-borderless to remove outlines and shadows.
Wrap content in .ng-glass-content so text sits above the sheen/noise overlays.

Distribution

NodeGlass ships ESM and a plain CSS file. The exports map exposes:

nodeglass → src/index.js
nodeglass/styles.css → styles/nodeglass.css

No build step is required; publish directly with npm publish.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme