New component families introduced in FG UI 1.1.
Show new componentsNew navigation
Explore what’s new in FG UI
Use the new Showcase and Themes menus to jump straight to Hybrid, the 1.3 roadmap, feature labs and the complete changelog.
One live source
Try to find problems before FG UI is released
Every normal Laboratory page consumes /dev/assets/css/fgui.css and /dev/assets/js/fgui.js directly. /ba/ is the one deliberate exception: it freezes version-labelled historical assets so older component designs never drift when /dev/ changes.
Normal rule
No hidden repair layer
Normal Laboratory pages use only the live FGUI-DEV files. Red notices identify unsupported capabilities or deliberate TEST-ONLY exceptions.
FG UI 1.1 DEV
New and updated components
Release labels make the 1.1 review easy. NEW means the family first appears in 1.1; UPDATED means an existing 1.0.2 family received a meaningful Core change.
Existing 1.0.2 families with meaningful 1.1 Core changes.
Show updated componentsExisting component families carried forward unchanged from 1.0.2.
Show existing componentsVersion history
Before / After component comparison
See only the existing components that genuinely changed, with each historical FG UI version rendered by its own frozen runtime.
1.0.21.1
Compare the old and new component together
Thirteen existing component families changed in 1.1. Their 1.0.2 and 1.1 versions are grouped together so we can decide which design we prefer. Future version snapshots will be appended to the same component history.
Laboratory status key
Use the notice colour before deciding whether something is a bug.
GREEN · IMPLEMENTED
FG UI currently implements the capability. Unexpected breakage should be investigated.
YELLOW · MANUAL / BASIC
FG UI has support, but the check depends on browser, operating system, printing or manual inspection.
RED · NOT IMPLEMENTED / TEST-ONLY
Do not mistake expected limitations or an active external test asset for a normal FG UI regression.
All Laboratory pages
The full component catalogue remains in /dev/; these pages focus on specialised conditions.
Forms
Inputs, selectors, dates, advanced controls and repeatable fields.
Open testInteractions
Modal, drawer, menus, tabs, accordion, toast and other live fgui.js behaviour.
Open testLayout
Grid, split, sidebar, nesting and composition.
Open testResponsive
Mobile, tablet, narrow-container and wrapping checks.
Open testMobile 320
Load the complete FG UI catalogue, Laboratory pages and real website tests inside one true 320px viewport.
Open 320px testColors & tokens
Live semantic colour system plus theme-readiness status.
Open testTypography
Headings, paragraphs, lists, links, code and long text.
Open testStates
Default, disabled, success, warning, error, loading and empty states.
Open testAccessibility
Keyboard, focus, labels, contrast, zoom and semantic checks.
Open testMotion
Animations and prefers-reduced-motion behaviour.
Open testRTL
Right-to-left probe. Formal RTL support is not implemented yet.
Open testExisting print rules exercised through browser Print Preview.
Open testScale
Large repeated component sets and long tables.
Open testStress
Long content, dense toolbars, overflow and awkward combinations.
Open testEnvironment
Browser, zoom, high contrast, touch and OS-level manual checks.
Open testDynamic API
Inject content after page load and call the real FGUI.init(root) / toast API.
Open testHostile CSS
Deliberately loads one external hostile stylesheet after FG UI.
Open testNo JavaScript
Intentionally omits fgui.js to inspect graceful fallback behaviour.
Open testReal website tests
Full websites built only with the live FGUI-DEV, added and reviewed one at a time.
Joomla Component Product Website
Commercial software product page using real FG UI navigation, marketing, Joomla/admin, pricing, FAQ and footer patterns.
Open test websiteSmall Business · Angel Lengths
Hair extensions and hair fittings by Lisa, built as a focused personal-service small business website.
Open test websiteE-Commerce · Oak & Linen
Homeware storefront covering shopping, product detail, cart, checkout, payments and reviews.
Open test websiteCorporate · Northstar Group
Diversified corporate website covering business divisions, metrics, impact, leadership, offices, careers and news.
Open test websiteE-Learning · Brightpath Academy
Learning platform covering course discovery, progress, lessons, curriculum, quizzes and enrollment.
Open test websiteTest website collection
Open the dedicated directory for current and future real-world website tests.
View test websitesFG UI 1.2 Stable feature laboratories
Focused showcases for the additive capabilities shipped in the current FG UI 1.2.0 Stable release.
Reader 1.2
Reader shell, text sizing, edge navigation, selection and annotation.
Open reader labThemes 1.2
Light, Dark, System, preview, compatibility and preferences.
Open theme labMaintenance 1.2
Health, scan, safe repair, verification, packages and API status.
Open maintenance labAlternatives 1.2
Original and explicit ALT families shown side by side.
Open ALT labDeployment rule
- FGUI-DEV updates
- Upload /dev/ only
- Laboratory updates
- Upload root Laboratory files only
- Duplicate canonical fgui.css / fgui.js in Laboratory
- Never
- /ba/ historical snapshots
- Version-labelled and immutable
- Active TEST-ONLY asset
- Hostile page only
FG UI 1.3 development
Theme Composition / Hybrid / Accent
Mix natural Light FGUI with intentional Dark surfaces, then personalise the semantic interface accent without changing FG brand blue.
Theme Composition 1.3 Laboratory
Open 1.3 LabHybrid mode, nested Light/Dark surfaces and application-shell experiments.
Component Inheritance 1.3 Laboratory
Open Phase 2 LabButtons, forms, data, navigation, reader, maintenance and ALT families inside local Light/Dark surfaces.
Accent Personalisation 1.3 Laboratory
Open Phase 2A LabHorizontal-only hue selection, generated accessible Light/Dark recipes, presets, persistence and reset-to-FG-blue.
Overlay Context 1.3 Laboratory
Open Phase 3 LabRoot overlays and detached targets carry opener Light/Dark/Hybrid + Accent context.
Hybrid Shell Stress 1.3 Laboratory
Open Phase 4 LabFive mixed-theme application shells plus deep nesting, forms, states, responsive stress and live overlay context refresh.
Theme Builder 1.3 Laboratory
Open Phase 4A LabChoose site defaults and visitor permissions, generate the required startup markup, preview safely and reset.
Theme Package 1.3 Laboratory
Open Phase 5 LabExport/import one portable versioned appearance package shared by FG UI and FGUI-J.
Public Theme API 1.3 Laboratory
Open Phase 6 LabResolved context snapshots, unified lifecycle events and safe integration bindings for charts, maps and editors.
Accessibility Modes 1.3 Laboratory
Open Phase 7 LabForced Colours, increased contrast, reduced motion, native colour-scheme and nested/portaled focus hardening.
FG UI 1.3 · Phase 7B
Internationalisation + Platform Hardening
RTL/LTR, localisation expansion, touch, safe areas, native browser integration, CSP/offline and component discovery.
Internationalisation + Platform 1.3
Open Phase 7B LabRTL/bidi, long text, native controls and touch fixtures.
Component Finder 1.3
Find a componentSearch all 459 canonical families by plain-language purpose, usage class and category.
CSP + Offline 1.3
Open deployment LabSelf-hosted/no-network and content-first no-JavaScript deployment guidance.
FG UI 1.3 · Phase 8
Visual Regression + Real-World Matrix
Frozen screenshot and geometry references across Theme, Accent, responsive, site, edge-case and dynamic overlay states.
Visual Regression Reference 1.3
Open Phase 8 Lab45 canonical visual cases backed by explicit baseline images, hashes, geometry and overflow checks.