BaseFrame for Joomla

One Joomla template. 13 CSS frameworks + Vanilla. One dropdown.

BaseFrame for Joomla is a universal Joomla 5/6 template that swaps CSS frameworks with a single admin setting. Same HTML, same content, completely different look — from Bulma to NES.css.

Built entirely by AI using Claude Code.

Download

• Download latest ZIP — install directly via Joomla admin (System → Install → Upload)
• Demo content — seed your site with the same articles, menus, and modules as the live demo

Made for AI-assisted development

BaseFrame is designed for developers working with VS Code + Claude Code in a Docker environment (local or VPS). The template ships as pure CSS and vanilla JS — no build tools, no Node.js, no npm. Describe what you want changed, your AI reads the adapter CSS, writes the fix, and deploys it. No manual coding required.

Works with any AI coding assistant (Claude Code, GitHub Copilot, Cursor, ChatGPT). Works on any Docker setup — local development or production VPS. Power users can of course install and customize it however they prefer — the AI workflow is a recommendation, not a requirement.

Quick start

1. Download the zip from Releases
2. Joomla admin → System → Install → Upload the zip
3. System → Templates → Site Template Styles → click the star next to BaseFrame to set as default
4. Click BaseFrame to open settings → pick a CSS framework → Save

Your existing content — articles, menus, modules, contact forms — renders in the new framework instantly.

Live Demos

Every framework has a full demo site with Home, About, Services, Portfolio, Blog, Team, FAQ, Pricing, Components, and Contact pages.

Framework	Type	Demo
Bulma	Full framework	Demo
Chota	Micro (3KB)	Demo
Cirrus	Micro	Demo
DaisyUI	Full framework	Demo
Fomantic UI	Full framework	Demo
Foundation	Full framework	Demo
Halfmoon	Dark-first	Demo
MVP.css	Classless	Demo
NES.css	Retro/8-bit	Demo
Open Props	Design tokens	Demo
Pico CSS	Classless	Demo
Sakura	Classless	Demo
UIkit	Full framework	Demo
Vanilla CSS	No framework	Demo

Demo

Live demos: claudejoomla.com — all 13 frameworks + Vanilla with full content, forum, gallery, newsletter, and blog.

Demo Content

Want your site to look like the live demo out of the box? The demo content package includes all the articles, menus, modules, forum posts, and configuration used on claudejoomla.com. Install BaseFrame first, then import the demo content SQL to get the full experience — framework landing pages, Why Joomla articles, blog cards, sidebar modules, and the complete navigation structure.

Demo content package: coming soon.

How It Works

index.php reads the "framework" param from templateDetails.xml
    ↓
Loads: base.css → lib/{framework}.min.css → adapters/{framework}.css → custom.css
    ↓
HTML uses bf-* semantic classes (tf-header, tf-card, tf-nav, etc.)
    ↓
Each adapter maps bf-* classes to framework-specific visuals
    ↓
Switching frameworks = changing one dropdown in template settings

All HTML uses bf-* prefixed classes. No framework-specific classes in PHP files. The adapters handle all visual mapping.

Architecture

templates/baseframe/
├── index.php                 ← One file for all 14 options (13 frameworks + Vanilla)
├── templateDetails.xml       ← Framework dropdown param
├── error.php                 ← Error page
├── component.php             ← Component-only view
└── html/                     ← Joomla HTML overrides (bf-* classes only)

media/templates/site/baseframe/
├── css/
│   ├── base.css              ← Framework-agnostic layout
│   ├── custom.css            ← User overrides (never modified by updates)
│   ├── adapters/             ← One CSS file per framework
│   │   ├── bulma.css
│   │   ├── daisyui.css
│   │   ├── nes.css
│   │   └── ... (14 total)
│   └── lib/                  ← Framework CSS libraries (shipped locally)
│       ├── bulma.min.css
│       ├── daisyui.css
│       └── ... (14 total)
└── js/
    └── baseframe.js          ← Hamburger menu, card links (vanilla JS)

Install

Docker (recommended)

git clone https://github.com/whynotindeed/baseframe.git
cd baseframe
docker compose up -d
# Wait 30s for MariaDB, then:
docker exec baseframe-dev-joomla-app-1 php installation/joomla.php install \
  --site-name="BaseFrame" --admin-user="Admin" --admin-username="admin" \
  --admin-password="BaseFrame2026!" --admin-email="admin@example.com" \
  --db-host="joomla-db" --db-user="joomla" --db-pass="joomla_local_pass" \
  --db-name="joomla" --db-prefix="tf_" --db-type="mysqli"

Then discover and enable the template:

docker exec baseframe-dev-joomla-app-1 php cli/joomla.php extension:discover
docker exec baseframe-dev-joomla-app-1 php cli/joomla.php extension:discover:install

Manual

1. Copy templates/baseframe/ to your Joomla's templates/ directory
2. Copy media/templates/site/baseframe/ to your Joomla's media/templates/site/ directory
3. Go to System → Discover in the Joomla admin panel
4. Install BaseFrame
5. Set as default template in System → Templates → Site Template Styles

What's styled

Every adapter includes custom CSS for these Joomla views:

• Blog category — card grid with leading article, sidebar modules, pagination
• Single article — full typography: headings, lists, tables, code blocks, blockquotes, images
• Contact form — styled inputs, labels, textarea, submit button, CAPTCHA
• FAQ — <details>/<summary> accordion with open/closed states
• Pricing — card grid with featured card highlight
• Components — buttons, alerts, marks, statistics, tables
• Tags — tag pills, tagged items list
• Navigation — desktop menu, hamburger mobile menu, "More" dropdown
• Footer — three-column layout with links
• Sidebar — module titles, article lists, tag clouds
• Pagination — styled page numbers with active/disabled states
• Read more — styled buttons

Other Joomla views (login, registration, search results, news feeds, category list) render using the framework's default styles — functional but not custom-styled.

Adding a New CSS Framework

1. Download the framework CSS → css/lib/{name}.min.css
2. Create css/adapters/{name}.css mapping all bf-* classes
3. Add entry to $frameworks array in index.php
4. Add <option> to templateDetails.xml
5. Test all views: blog, article, contact, tags, FAQ, pricing

No Build Tools

BaseFrame ships as compiled CSS. No Node.js, no npm, no webpack, no Tailwind CLI. Edit the CSS files directly. The custom.css file is for your overrides — it's never modified by template updates.

No JavaScript Dependencies

One vanilla JS file. No jQuery, no React, no Alpine.js. The JS handles:

• Mobile hamburger menu toggle
• "More" dropdown submenu
• Clickable card links
• Back-to-top button visibility

License

MIT License — use it however you want. Free for personal and commercial use. No attribution required (but appreciated).

See LICENSE for the full text.

Credits

Built by Claude Code as part of the ClaudeJoomla.com project.