nalyx

A small Bootstrap-like CSS framework. Load only the CSS, only the JS, or both.

Install

CSS only

All styling, tokens, components and utilities — no JavaScript.

<link rel="stylesheet" href="https://nalyx.johlits.com/nalyx.min.css">

JS only

Interactive behaviours (theme toggle, modals, dropdowns, tabs, toasts) via data-nx-* attributes and the Nalyx API. Works with or without nalyx.css.

<script src="https://nalyx.johlits.com/nalyx.min.js" defer></script>

Both

<link rel="stylesheet" href="https://nalyx.johlits.com/nalyx.min.css">
<script src="https://nalyx.johlits.com/nalyx.min.js" defer></script>

Latest release

/latest/ always points at the newest version (short cache — picks up releases quickly):

<link rel="stylesheet" href="https://nalyx.johlits.com/latest/nalyx.min.css">
<script src="https://nalyx.johlits.com/latest/nalyx.min.js" defer></script>

Pinned version

Immutable URLs — safe to pin and cache forever:

<link rel="stylesheet" href="https://nalyx.johlits.com/v0.6.0/nalyx.min.css">
<script src="https://nalyx.johlits.com/v0.6.0/nalyx.min.js" defer></script>

Unminified: nalyx.css / nalyx.js. Version: 0.6.0

Components

Buttons
Badges
Default Accent Success Error Warning Purple
Alerts (dismiss needs nalyx.js)
Profile saved.
Your trial ends soon.
Payment failed.
Heads up — new version available.
Grid
col-4
col-4
col-4
col-6
col
col
Forms
We'll never share it.
Looks good.
Too short.
Dropdown & collapse (nalyx.js)
Profile Settings
Collapsible content.
Tabs (nalyx.js)
First pane.
Second pane.
Modal & toast (nalyx.js)
List group, breadcrumb, pagination, progress
Table
NameStatusPrice
FreeActive$0
ProPopular$12

Utilities

Spacing: m-* mt-* mb-* ms-* me-* mx-* my-* p-* px-* py-* gap-* (0–5) · Display: d-none d-flex d-grid d-md-* · Grid: col-1..12, responsive col-md-1..12 (≥768px) · Flex: flex-column justify-content-* align-items-* · Text: text-center text-muted fw-bold lead · Misc: rounded border shadow w-100 visually-hidden

Theming

Themes are a family × shade matrix. <html data-theme="wood"> selects a family (the built-in default applies when unset); data-shade="dark" forces a shade — otherwise the shade follows prefers-color-scheme. Families are just token overrides in your own stylesheet ([data-theme='wood'] { --bg: … } + [data-theme='wood'][data-shade='dark'] { … }). data-nx-toggle="theme" toggles the shade; data-nx-set-theme="sunset" / data-nx-set-shade="dark" switch directly. Choices persist to localStorage and fire a themechange event on document.

Effects (opt-in utility classes)

Gradients, glow, glass, motion

.text-gradient headline

.card .glass .lift
.card .lift

.fade-in / .slide-up animate on load (this card slid up). Wrap a section in .hero for a radial accent-wash backdrop.

Accordion, switch, range, skeleton
CSS-only accordion item
No JavaScript needed — just <details> elements inside .accordion.
Second item
Content lives in .accordion-body.
Avatar, chip, empty, copy
SM JD LG XL default chip accent chip
◇

Nothing here yet

Use .empty + .empty-icon + .empty-title for empty states.