Skip to content

Add vanilla HTML/CSS/JS export with interactive showcase#3

Merged
robdimarco-atxp merged 1 commit intomainfrom
robdimarco/create-vanilla-html-version
Dec 23, 2025
Merged

Add vanilla HTML/CSS/JS export with interactive showcase#3
robdimarco-atxp merged 1 commit intomainfrom
robdimarco/create-vanilla-html-version

Conversation

@robdimarco-atxp
Copy link
Contributor

@robdimarco-atxp robdimarco-atxp commented Dec 23, 2025

Summary

Adds a complete vanilla HTML/CSS/JS version of the ATXP Design System for environments where React cannot be used. This enables the design system to be used in legacy systems, static sites, or any project that prefers a framework-free approach.

What's Included

🎨 Interactive Component Showcase

  • Dashboard-style layout demonstrating how components work together
  • Includes stats cards, alerts, forms, and all button variants
  • Shows real-world component composition patterns

📦 20+ Components Across 8 HTML Files

  • Buttons - All variants, sizes, and states
  • Cards - Headers, footers, and complex layouts
  • Inputs - Text, email, password, number, file, with icons
  • Alerts - Info, success, warning, destructive variants
  • Dialogs - Modals with overlays and keyboard navigation
  • Forms - Checkbox, radio, select, textarea
  • UI Elements - Badges, avatars, separators
  • Interactive - Tabs, accordions, progress bars, skeletons

⚡ Vanilla JavaScript Components

  • Dialog - Modal functionality with ESC/backdrop closing
  • ThemeSwitcher - Theme management with localStorage
  • Toast - Notification system with auto-dismiss
  • Auto-initialization via data attributes

🏗️ Build & Distribution

  • build.sh script creates deployable site
  • Copies dist/ and updates all path references
  • Generates tar.gz archive (~136KB) for easy distribution
  • Render.com deployment configuration included

🛠️ Developer Tools

  • extract-components.cjs - Automated extraction from React sources
  • .gitignore excludes build artifacts and backups
  • Complete documentation in vanilla README

Theme Support

All 4 themes work identically to React version:

  • Light (default)
  • Dark
  • ATXP brand
  • DBG brand
  • Auto (system preference)

Documentation Updates

  • ✅ Updated CLAUDE.md with vanilla maintenance reminders
  • ✅ Updated main README.md with vanilla quick start
  • ✅ Added comprehensive vanilla/README.md

Testing

  • ✅ Build script tested and working
  • ✅ All component pages load correctly
  • ✅ Theme switching functional
  • ✅ Interactive components work as expected
  • ✅ Archive extracts properly

File Structure

vanilla/
├── .gitignore              # Excludes build artifacts
├── README.md               # Complete usage guide
├── build.sh                # Build & packaging script
├── index.html              # Main showcase page
├── extract-components.cjs  # Component extraction tool
├── components/
│   ├── alert.html
│   ├── button.html
│   ├── card.html
│   ├── dialog.html
│   ├── forms.html
│   ├── input.html
│   ├── interactive.html
│   └── ui-elements.html
└── js/
    └── components.js       # Vanilla JavaScript

Usage Example

<!DOCTYPE html>
<html data-theme="light">
<head>
  <link rel="stylesheet" href="./dist/styles.css">
</head>
<body>
  <button class="inline-flex items-center justify-center ... bg-primary text-primary-foreground ...">
    Click Me
  </button>
  <script src="./js/components.js"></script>
</body>
</html>

Benefits

  • ✅ Zero Dependencies - No React, no build step required for usage
  • ✅ Fully Self-Contained - Works offline, no CDN dependencies
  • ✅ Small Size - 136KB compressed archive
  • ✅ Progressive Enhancement - Static components work without JS
  • ✅ Accessible - ARIA roles, keyboard navigation throughout
  • ✅ Theme System - Same CSS variables as React version

Deployment

Once merged, Render will automatically deploy to a new static site at the vanilla endpoint.

@robdimarco-atxp
Add vanilla HTML/CSS/JS export with interactive showcase
4540594 
This adds a complete vanilla HTML/CSS/JS version of the ATXP Design System
for use in environments where React is not available.

Key features:
- 20+ components across 8 HTML files (buttons, cards, inputs, alerts,
  dialogs, forms, UI elements, interactive components)
- Interactive showcase demonstrating component composition in a
  dashboard-style layout
- Vanilla JavaScript for dialogs, theme switching, toasts, tabs, accordions
- Build script that creates deployable site + downloadable archive (136KB)
- Automated component extraction tool from React sources
- Full theme support (light, dark, ATXP, DBG) via CSS variables
- Zero dependencies - fully self-contained

Components:
- Forms: Checkbox, Radio, Select, Textarea
- UI Elements: Badge, Avatar, Separator
- Interactive: Tabs, Accordion, Progress, Skeleton
- Layout: Button, Card, Input, Alert, Dialog

Build & Deploy:
- Build script copies dist/ and updates paths for deployment
- Creates tar.gz archive for easy distribution
- Render.com deployment configuration
- .gitignore excludes build artifacts and backups

Documentation:
- Updated CLAUDE.md with vanilla maintenance reminders
- Updated main README.md with vanilla quick start
- Vanilla README.md with complete usage guide
@robdimarco-atxp robdimarco-atxp merged commit 8e64eb5 into main Dec 23, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@robdimarco-atxp