# Arx Framework

A full Bootstrap-replacement CSS skeleton with 12-column grid, buttons, forms, cards, navbar, alerts, badges, tables, and utilities. Dual light/dark theme support.

## Installation

```html
<link rel="stylesheet" href="css/arx.css">
```

No build step. No JavaScript dependency. Arx does not bundle jQuery; add it separately if needed.

## Theming

Add `arx-dark` to `<html>` or `<body>` for the dark theme.

```html
<html class="arx-dark">
```

Toggle and persist via JavaScript:

```js
var saved = localStorage.getItem('arx-theme');
if (saved === 'dark') document.documentElement.classList.add('arx-dark');

document.getElementById('toggle').addEventListener('click', function () {
  var isDark = document.documentElement.classList.toggle('arx-dark');
  localStorage.setItem('arx-theme', isDark ? 'dark' : 'light');
});
```

## Quick Reference

### Grid

```html
<div class="arx-container">
  <div class="arx-row">
    <div class="arx-col-md-8">Main</div>
    <div class="arx-col-md-4">Sidebar</div>
  </div>
</div>
```

Breakpoints: `sm` 576px, `md` 768px, `lg` 992px, `xl` 1200px.

### Buttons

```html
<button class="arx-btn arx-btn-primary">Primary</button>
<button class="arx-btn arx-btn-outline">Outline</button>
<button class="arx-btn arx-btn-sm">Small</button>
```

Variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `ghost`, `outline`, `outline-primary`.

### Forms

```html
<div class="arx-form-group">
  <label class="arx-label">Email</label>
  <input type="email" class="arx-input" placeholder="you@example.com">
  <div class="arx-form-text">We never share your email.</div>
</div>
```

### Cards

```html
<div class="arx-card">
  <div class="arx-card-header">Header</div>
  <div class="arx-card-body">
    <div class="arx-card-title">Title</div>
    <p class="arx-card-text">Body text.</p>
  </div>
  <div class="arx-card-footer">Footer</div>
</div>
```

### Alerts

```html
<div class="arx-alert arx-alert-success">
  <span class="arx-alert-icon">&#x2713;</span>
  <div class="arx-alert-body">
    <div class="arx-alert-title">Success</div>
    Operation completed.
  </div>
</div>
```

Variants: `info`, `success`, `warning`, `danger`. Add `.arx-alert-dismissible` for a close button.

### Badges

```html
<span class="arx-badge arx-badge-primary">New</span>
<span class="arx-badge arx-badge-danger arx-badge-square">12</span>
```

### Tables

```html
<div class="arx-table-responsive">
  <table class="arx-table arx-table-bordered arx-table-hover">...</table>
</div>
```

### Navbar

```html
<nav class="arx-navbar">
  <div class="arx-navbar-inner">
    <a href="/" class="arx-nav-brand">Brand</a>
    <ul class="arx-nav-links">
      <li><a href="#" class="arx-nav-link arx-active">Home</a></li>
    </ul>
  </div>
</nav>
```

Add `.arx-navbar-sticky` for fixed-on-scroll behavior.

### Utilities

Spacing: `arx-m-{1-5}`, `arx-p-{1-5}` with `t/b/l/r/x/y` variants.
Display: `arx-d-flex`, `arx-d-none`.
Text: `arx-lead`, `arx-muted`, `arx-text-center`.
Flex: `arx-justify-between`, `arx-align-center`, `arx-gap-{1-5}`.

## CSS Variables

Override design tokens after importing `arx.css`:

```css
:root {
  --arx-primary: #7c3aed;
  --arx-container-max: 960px;
  --arx-radius: 0.75rem;
}
```

Key variables: `--arx-bg`, `--arx-surface`, `--arx-border`, `--arx-text`, `--arx-primary`, `--arx-success`, `--arx-danger`, `--arx-warning`, `--arx-font`, `--arx-radius`, `--arx-gutter`, `--arx-container-max`.

## Build (Development)

Requires [Sass](https://sass-lang.com/):

```bash
npm install
npm run build      # Expanded output
npm run build:min  # Minified output
```

Source lives in `scss/`. Compiled output is `css/arx.css`.

## Files

- `css/arx.css` — Compiled CSS (all components, no build required)
- `scss/` — Sass source files (for development/customization)
