Skip to content
FGUI-J 1.3.0 StableJoomla 6GPL-2.0-or-later

A Joomla-native application UI framework.

Design system, interactive component runtime, theme engine, accessibility layer, 800-icon system and Joomla Web Asset integration — without bringing in another frontend framework.

Try the live UIExplore all 50 capabilities

This site is rendered with the installed $wa->usePreset('fguij') preset. The UI below is the product being demonstrated.

● ● ●FGUI-J / Joomla 6
Theme-awareApplication UI

Forms, navigation, data, overlays, themes and accessibility in one preset.

800icons
42contracts
4themes
Components
Runtime API
Responsive
Accessible
At a glance

A lot more than a CSS skin

Direct inspection of the Stable package shows a broad UI vocabulary backed by a substantial vanilla-JavaScript runtime.

≈1,397.fgui-* selectors
≈637root UI families
800stable icon IDs
42/42protected core contracts
Live component lab

Try the real runtime

These controls are wired to FGUI-J itself: theme switching, accents, overlays, toasts, accordion and carousel behaviour.

Buttons & semantic feedback

Core action and status vocabulary.

FGUI-J is active.

This alert is styled by the installed FGUI-J preset.

Forms

Semantic HTML with FGUI-J styling.

Runtime actions

No extra component library required.

The installed fguij.js runtime manages component state, ARIA behaviour, overlays and UI context.

No. FGUI-J is framework-independent and uses its own CSS, vanilla JavaScript, local fonts and SVG icon sprite.

Carousel

Another runtime-managed component.

Build application shells

Layouts, navigation, panels, dashboards and content structures.

Add real interactions

Modals, drawers, pickers, toasts, repeatables, tours and more.

Stay Joomla-native

One Web Asset preset plus dynamic-content reinitialisation.

Application patterns

One UI foundation, many kinds of Joomla extensions

FGUI-J includes application-level compositions as well as low-level controls.

Administrator apps

Dashboards, CRUD list/edit/config views, permissions, publishing, batch and status interfaces.

Data & workflow

Tables, metrics, Kanban, audit/activity streams, projects, moderation and approval flows.

Booking & scheduling

Availability, slots, calendars, events, agendas and opening-hours patterns.

Community

Comments, chat, presence, reactions, forums, directories, groups and events.

Content & media

Articles, news, galleries, lightboxes, media library/picker and publishing interfaces.

Commerce & services

Product, cart, checkout, wishlist, payment, delivery and service-style UI patterns.

Theme engine

Light, Dark, Hybrid and System — live

Change the active theme and accent. FGUI-J stores allowed visitor preferences and recalculates supporting accent roles.

Theme
Accent
Light surface

Local Light

A local semantic surface can stay light regardless of surrounding context.

Dark surface

Local Dark

Open an overlay from here and FGUI-J can transfer this theme context with it.

Accessibility & reader controls

Accessibility is part of the runtime contract

ARIA state, focus management, keyboard behaviour, reduced motion, forced contrast, skip links and reader sizing are built into the system.

Reader text size

Change the size of this showcase content using FGUI-J's reader API.

Joomla-native

One preset. Dynamic-content aware.

FGUI-J registers its own Joomla distribution assets and keeps the public integration deliberately simple.

Load FGUI-J

PHP / Joomla Web Asset Manager
$wa = $this->getWebAssetManager();
$wa->usePreset('fguij');

That preset loads fguij.css, fguij.js and fguij-joomla.js.

Dynamic Joomla DOM

Joomla bridge behaviour
document.addEventListener('joomla:updated', ...)
FGUI.init(updatedElement);

Newly inserted Joomla content can initialise FGUI-J controls without reloading the page.

Developer API

A public runtime instead of DOM guesswork

Use stable API calls for UI state, themes, localisation, reader controls and diagnostics.

Core interactions
FGUI.init(element)
FGUI.open(target)
FGUI.close(target)
FGUI.toggle(target)
FGUI.toast(message)
FGUI.icon('search')
Themes & diagnostics
FGUI.theme.apply('hybrid')
FGUI.theme.setAccent(206)
FGUI.theme.getContext()
FGUI.reader.setTextSize(...)
FGUI.inspect()
FGUI.debug()
FGUI.validateConfig()
Complete inventory

50 capability areas

Search the full Stable capability map. Labels distinguish visual UI, JavaScript runtime, Joomla integration and architecture.

50 shown
Capability catalogue

Foundation & controls

10 capability areas in this group.

01UI

Core layout and application structure

Application shells, page structures, sidebars, toolbars, panels, responsive grids, sticky UI, split views, mobile actions and hero areas.

02UI

Buttons and actions

Primary, secondary, soft, ghost, dark, semantic, icon, block, size, task, ALT, grouped, bulk, batch and selection actions.

03UI + Runtime

Form system

Text fields, textareas, native and enhanced selects, checks, radios, switches, ranges, specialist inputs, validation, repeatables and advanced pickers.

04UI + Runtime

Navigation

Breadcrumbs, main/side/mobile/bottom navigation, mega menus, category and anchor navigation, pagination, TOCs and keyboard-aware menus.

05Runtime

Tabs and disclosure controls

Tabs, ALT tabs, accordions, disclosure states and ARIA-aware expanded/controlled relationships.

06Runtime

Modals, drawers and overlays

Opening/closing, Escape handling, return focus, dialog semantics, overlay locking and theme-context transfer.

07Runtime

Theme-context-aware overlays

Floating UI can inherit the semantic theme/accent context of the surface that opened it.

08Runtime

Toasts and notifications

Toast API, icons, details, duration, ARIA live regions, automatic removal and inherited theme context.

09UI + Runtime

Galleries, images and media

Galleries, lightboxes, carousels, media cards, media library/picker patterns, thumbnails and upload queues.

10UI

Data tables and structured data

Tables, ALT/data/comparison/permission tables, toolbars, wrappers, pagination summaries, key/value and status rows.

Capability catalogue

Applications & workflows

20 capability areas in this group.

11UI

Dashboards

Admin dashboards, KPI strips, metrics, trends, mini charts, progress, forecasts, status flows and environment states.

12UI

Joomla Administrator-style interfaces

Admin dashboard, list/edit/config views, publishing, permissions, batch/bulk actions and extension/package status patterns.

13UI + Runtime

Search and filtering

Search, suggestions, filter bars/builders/groups/tokens, saved views and client-side filter-set behaviour.

14Runtime

Sorting and reordering

Sortable collections, move-up/down controls, reorder handles/lists and ordering-state updates.

15Runtime

Repeatable fields

Add/remove repeatable rows from templates for addresses, team members, FAQs, links, opening hours, prices and more.

16Runtime

Date and time interfaces

Date, month and time pickers with navigation, clear/today/current actions, locale-aware labels and input synchronisation.

17Runtime

Colour picker

Preset colours, custom HEX, validation, swatch preview, apply action, keyboard behaviour and input/change synchronisation.

18Runtime

Combobox and tree selection

Filtering comboboxes and hierarchical tree selection for categories, menus, organisations and nested content.

19UI + Runtime

File/upload interfaces

File displays, upload items/queues, evidence/import/secure-document patterns and dropzone behaviour; server upload remains application-owned.

20UI

Content and publishing interfaces

Articles, cards, heroes, news grids, related content, bylines, citations, figures, TOCs, reading time and publishing panels.

21UI

Authentication/account UI

Auth shells/cards/branding, login layouts, account access, password/OTP/recovery-code/security/session/verification patterns.

22UI

Ecommerce-style UI

Product grids/details/galleries, variants, SKU/stock/price, cart, checkout, payment, shipping, orders, discounts, tax and wishlist patterns.

23UI

Booking and scheduling UI

Booking/availability cards, availability picker, appointment/delivery slots, event calendars/details, agendas and opening hours.

24UI

Community/social UI

Comments, threads, chat, presence, mentions, reactions, votes, polls, forums, member directories, groups, events and notifications.

25UI

Learning/course UI

Course/lesson cards, curriculum, enrolment, progress, quizzes, certificates and instructor patterns.

26UI

Organisation/workflow UI

Kanban, workflow evidence, audit/activity streams, projects, resources, members, invitations, org charts, moderation and approvals.

27Runtime

Guided tours

First-run onboarding with steps, next/back/close, counters, target references, spotlight, live announcements and tour panels.

28Runtime

Countdown timers

Days, hours, minutes and seconds countdown rendering.

29Runtime

Back-to-top behaviour

Built-in scroll-aware back-to-top control.

30Runtime

Copy-to-clipboard behaviour

Dedicated data-fgui-copy support for keys, URLs, IDs, code and reference values.

Capability catalogue

Themes, access & platform

12 capability areas in this group.

31Runtime

Theme engine

Light, Dark, Hybrid and System modes with a public theme API.

32UI + Runtime

Local theme surfaces

Different sections of the same page can deliberately use different semantic themes, including nested light/dark surfaces.

33Runtime

Accent customisation

FG Blue plus Teal, Green, Orange, Rose and Purple recipes, with generated supporting semantic roles.

34Runtime

Theme events and live synchronisation

Subscribe/bind/context APIs allow extension code and open UI to respond to live theme/accent changes.

35Runtime

Theme package import/export

Export, validate and import theme packages; enables a separate management UI to exchange theme configurations.

36Runtime

Reader/text-size system

Small, normal, medium, large and extra-large reader sizes via public APIs and controls.

37UI + Runtime

Accessibility support

ARIA state management, focus handling, keyboard navigation, Escape close, live regions, skip links, reduced motion and forced contrast.

38UI

RTL/bidirectional support

Direction-aware navigation, drawers, switches, pagination, menus and directional controls.

39Runtime

Localisation

Configurable locale/string dictionary through FGUI.configure(), FGUI.getLocale() and FGUI.t().

40UI + Runtime

Icons

800 stable icon IDs available through the SVG sprite, FGUI.icon() and data-fgui-icon markup.

41UI

Local typography

Six local Manrope variable-font subsets: Latin, Latin Extended, Cyrillic, Cyrillic Extended, Greek and Vietnamese.

42UI

Responsive behaviour

Desktop, tablet, mobile, small-mobile, coarse-pointer/touch and safe-area-aware adaptations.

Capability catalogue

Joomla & developer integration

7 capability areas in this group.

43Joomla

Joomla Web Asset Manager integration

A Joomla extension requests one public preset: $wa->usePreset('fguij').

44Joomla

Joomla dynamic-content support

The bridge listens for joomla:updated and reinitialises FGUI controls inside newly inserted/replaced content.

45Runtime

Public JavaScript developer API

Initialisation, overlays, toasts, icons, localisation, themes, accents, reader controls, diagnostics and configuration APIs.

46Runtime

Diagnostics/developer support

FGUI.inspect(), FGUI.debug() and FGUI.validateConfig(), plus internal initialisation metrics.

47UI + Runtime

Progressive enhancement

Rich controls can sit on top of ordinary semantic HTML while retaining native form values and events.

48Architecture

No framework lock-in

CSS, vanilla JavaScript, SVG icons, local fonts, Joomla asset registration and a small Joomla bridge — no React/Vue/Angular/Bootstrap dependency.

49UI

Very large styling vocabulary

About 1,397 distinct .fgui-* selectors and roughly 637 root UI families, including many application-level compositions.

Capability catalogue

Scope boundary

1 capability areas in this group.

50Architecture

Clear scope boundary

FGUI-J supplies UI mechanics, not databases, controllers, authentication, payments, booking/search backends, upload endpoints or application business logic.

Important boundary

FGUI-J handles interface mechanics, not your application backend

The presence of a visual pattern does not mean FGUI-J supplies the corresponding business service.

FGUI-J supplies

  • Visual design and layout
  • Forms and advanced controls
  • Interactive component behaviour
  • Theme and accent systems
  • Accessibility behaviour
  • Responsive/touch/RTL support
  • Icons and local typography
  • Overlay and UI-state mechanics
  • Joomla asset/dynamic-content integration

Your Joomla extension supplies

  • Database models and storage
  • Controllers, routing and permissions
  • Authentication/business rules
  • Payments and booking engines
  • Search backends
  • Upload/storage endpoints
  • Email delivery
  • Domain-specific APIs and business logic

Build the Joomla logic. Let FGUI-J handle the interface.

Use this site as the live reference for what FGUI-J 1.3.0 Stable can provide to Joomla extensions, modules, plugins and templates.

Download capability documentBack to top