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.3.1/nalyx.min.css">
<script src="https://nalyx.johlits.com/v0.3.1/nalyx.min.js" defer></script>

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

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-6

col

Forms

Email We'll never share it.

Plan

Subscribe to newsletter

Username Looks good.

Password Too short.

Dropdown & collapse (nalyx.js)

Collapsible content.

Tabs (nalyx.js)

First pane.

Second pane.

Modal & toast (nalyx.js)

List group, breadcrumb, pagination, progress

An item
Active item
Plain item

Table

Name	Status	Price
Free	Active	$0
Pro	Popular	$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.