TactileGlass CSS — Documentation

Install

Package name tactileglass-css on npm.

npm install tactileglass-css

Load the compiled stylesheet from your bundler:

import 'tactileglass-css/dist/tactileglass.min.css';

Or link it from HTML:

<link rel="stylesheet" href="node_modules/tactileglass-css/dist/tactileglass.css">

Sass entry if you compile it yourself: tactileglass-css/src/scss/tactileglass.scss

CSS-only / no Bootstrap JS

TactileGlass ships stylesheets only — there is no Bootstrap JavaScript runtime, Popper, or component plugins.

Dropdowns & selects use native <details> / <summary> (optional tiny demo script in docs for closing extras).
Nav collapse is CSS checkbox / details patterns — not Bootstrap’s collapse plugin.
Theme toggle is a small docs helper; production apps can set theme-dark however they like.

If you need modals, tooltips, or imperatively opened menus, bring your own JS — TG won’t conflict as long as you keep class names.

Class language

Compose component + style, then modifiers:

Component + style. tg-btn tg-neu, tg-card tg-glass-frosted, tg-dropdown tg-hybrid. The control is generic. The style class paints it.
Modifiers. Bootstrap-style extras that work on every style: btn-sm, btn-primary, tg-interactive, nav-sticky, tg-neu-reverse, input-pill.
Utilities. Bootstrap-style helpers for layout, space, and shape: d-flex, flex-column, justify-content-between, align-items-center, p-4, rounded-squircle, bg-white, text-white, border-none, theme-dark. Prefer style classes over morph-*; morph is the !important escape hatch.

<button class="tg-btn tg-neu btn-primary btn-lg">Save</button>

<section class="tg-card tg-glass-frosted card-sm p-4">...</section>

<details class="tg-dropdown tg-glass-frosted">...</details>

<div class="tg-hybrid rounded-squircle p-6">Custom panel</div>

Three styles

Pick one style per node. Do not stack tg-btn tg-neu with tg-btn tg-glass.

neu

Raised or sunken clay. Shadows come from --tg-neu-shadow-drop and --tg-neu-shadow-inset. Pair with tg-neu-reverse, tg-neu-surface, or tg-neu-inset.

glass

tg-glass for the pane; tg-glass-frosted for blur, inset glow, and edge sheen. Color modifiers become translucent lenses.

hybrid

Glass fill sitting inside a tactile shadow. The signature TactileGlass look.

Style classes paint any element. morph-neu, morph-glass-frosted, morph-hybrid-reverse, and the rest mirror that matrix with !important.

Layout: flex row and CSS grid

container is a centered, breakpoint-growing shell (540 / 720 / 960 / 1140 / 1320). Start a shell at a later breakpoint with container-sm through container-xxl. Use container-fluid for full width with the same gutters.

Flex rows use .row / .col-*; track grids use .grid / .grid-md-3. See Layout.

See the container showcase for live widths.

Collapsible nav

Collapse is CSS-only. details.nav-collapse holds only the hamburger summary. Put .nav-links as a sibling under .tg-nav. Keep theme-toggle in .nav-end on the top row.

Below the expand breakpoint the panel is hidden until the details is open. From md (768px) up, nav-expand-md shows the links in a row and hides the toggle. Use nav-expand-lg to wait until 992px, or omit the expand class to keep the hamburger at every width.

<header class="tg-nav tg-hybrid nav-sticky">
  <a class="nav-brand" href="/">TactileGlass.css</a>
  <div class="nav-end">
    <button type="button" class="theme-toggle" data-theme-toggle></button>
    <details class="nav-collapse nav-expand-md">
      <summary class="nav-toggle" aria-label="Menu">
        <span class="nav-toggle-bars" aria-hidden="true"></span>
      </summary>
    </details>
  </div>
  <nav class="nav-links">
    <a href="/" class="is-active">Home</a>
    <a href="/docs">Docs</a>
  </nav>
</header>

Depth modifiers stay on the parent: tg-neu-reverse, tg-neu-surface, tg-neu-inset (same suffixes on glass and hybrid). Do not put inset or surface classes on .nav-links.

Dark mode

Add theme-dark to <html> (or any subtree) to invert the token palette: canvas, ink, glass, and neu shadows. Use theme-light to force a light island inside a dark page. data-theme="dark" / data-theme="light" work the same way.

<html class="theme-dark">
  ...
</html>

<section class="theme-dark p-6 rounded-lg">
  Dark island
</section>

The moon button in the navbar is a theme-toggle control. Persist the choice on document.documentElement — the docs site stores it as localStorage.tg-theme.

Tokens

Public API is --tg-{name} from the light map, plus structural tokens in src/scss/base/_tokens.scss. --clr-* / --glass-* stay aliases. Dark only patches ink, canvas, shadows, and glass/hybrid fills — pastels inherit. Live examples live on Customize.

Brand and semantic

Token	Role
`--tg-primary` `--tg-primary-rgb`	Brand / focus / `btn-primary`
`--tg-secondary`	Muted accent
`--tg-success` `--tg-info` `--tg-warning` `--tg-danger`	Semantic accents (+ matching `*-rgb`)
`--tg-dark`	Always-dark fill for `btn-dark`

Named palette

Token	Role
`--tg-blue` `--tg-indigo` `--tg-purple` `--tg-pink` `--tg-red` `--tg-orange` `--tg-yellow` `--tg-green` `--tg-teal` `--tg-cyan`	Named hues
`--tg-gray` `--tg-gray-dark` `--tg-gray-100` … `--tg-gray-900`	Gray ramp

Body, ink, and links

Token	Role
`--tg-body-color`	Page ink
`--tg-body-bg`	Canvas
`--tg-heading-color` `--tg-code-color` `--tg-emphasis-color`	Headings, code, strong ink
`--tg-link-color` `--tg-link-hover-color` `--tg-link-decoration`	Links
`--tg-secondary-color` `--tg-secondary-bg` `--tg-tertiary-color` `--tg-tertiary-bg`	Muted copy and surfaces
`--tg-highlight-color` `--tg-highlight-bg`	Mark / highlight

Emphasis, subtle fills, and subtle borders

Token	Role
`--tg-primary-text-emphasis` … `--tg-dark-text-emphasis`	Stronger semantic ink
`--tg-primary-bg-subtle` … `--tg-dark-bg-subtle`	Tinted surfaces
`--tg-primary-border-subtle` … `--tg-dark-border-subtle`	Tinted edges

Glass, hybrid, and neu

Token	Role
`--tg-glass-bg` `--tg-glass-bg-raised` `--tg-glass-bg-pressed`	Glass fills
`--tg-glass-blur` `--tg-glass-menu-blur` `--tg-glass-menu-bg` `--tg-glass-border` `--tg-glass-shadow` `--tg-glass-ripple`	Frost, menu fill/blur, edge, drop, ripple
`--tg-hybrid-bg` `--tg-hybrid-bg-pressed`	Hybrid fills
`--tg-neu-shadow-drop` `--tg-neu-shadow-inset` `--tg-neu-shadow-lift`	Clay depth

Border, radius, shadow, and focus

Token	Role
`--tg-border-width` `--tg-border-style` `--tg-border-color` `--tg-border-subtle` `--tg-hr-color`	Edges and rules
`--tg-border-radius*` and `--radius-sm` / `--radius-md` / `--radius-lg` / `--radius-squircle` / `--radius-pill`	Rounding
`--tg-box-shadow` `--tg-box-shadow-sm` `--tg-box-shadow-lg` `--tg-box-shadow-inset`	Generic shadows
`--tg-focus-ring-width` `--tg-focus-ring-color` `--tg-form-valid-color` `--tg-form-invalid-color`	Focus and form state

Type, spacing, and breakpoints

Token	Role
`--font-sans` `--font-display` `--font-mono` `--fs-xs` … `--fs-6xl`	Type
`--spacing` `--sz-1` … `--sz-12` `--max-w-prose`	Spacing and measure
`--z-base` `--z-sticky` `--z-overlay`	Stacking
`--tg-breakpoint-sm` … `--tg-breakpoint-xxl`	576 / 768 / 992 / 1200 / 1400

Component reference

Every control ships in three materials unless noted. Full gallery:

Buttons — tg-btn tg-neu btn-sm btn-primary

Cards — tg-card tg-glass tg-interactive

Inputs — tg-input tg-hybrid tg-dropdown tg-neu tg-switch tg-neu

Navbars — tg-nav tg-neu tg-neu-reverse nav-sticky

Alerts, badges, lists, tables, progress

Containers — container container-lg container-fluid

Morph + shape — morph-neu rounded-squircle

Layout — breakpoints, 12-col grid, gutters

Utilities — spacing, display, type helpers

Customize — recolor without forking the Sass

Contribute

TactileGlass is open source under the MIT License. Issues and pull requests are welcome on GitHub.

git clone https://github.com/slurrps-mcgee/Tactile-Glass.git
cd Tactile-Glass
npm install
npm run dev

Useful scripts:

npm run sass:build — compile dist/tactileglass.css and copy it into docs/
npm run sass:watch — rebuild on Sass changes
npm run serve — docs at docs/
npm run build — compile + minify

Source lives in src/scss: base/ tokens and mixins, styles/ neu/glass/hybrid, components/ controls, layout/ container, flex, and grid, animations/ motion, utilities/ morph, theme, spacing, and color.

Keep class names unambiguous: component, then material, then modifiers, then utilities.