Use FG UI without bringing another framework with it.
The core is deliberately simple: local CSS, local JavaScript, local assets and semantic FG UI classes.
Load FG UI locally
FG UI should be served from the same product or installed shared library. Do not load it from a third-party CDN.
<link rel="stylesheet" href="assets/css/fgui.css">
<script src="assets/js/fgui.js"></script>Components use the `.fgui-*` namespace
<button class="fgui-btn fgui-btn--primary">
Save changes
</button>Interaction behaviour stays in FG UI
Dropdowns, date/time pickers, modals, drawers and other reusable behaviour belong in `fgui.js`, not copied into each consuming product.
FG UI owns the mobile interaction layer
Normal FG UI interfaces use the custom dropdown, date, time, month and colour controls so the open interface remains visually consistent across phones and desktop browsers. Native controls remain available only as explicit fallbacks.
Touch behaviour
- No square browser tap-highlight flash
- Mobile-safe control heights and touch targets
- 16px focused form text to prevent iPhone auto-zoom
- Bottom-sheet dropdown and picker panels on small screens
Responsive behaviour
- Wide tables scroll inside their own container
- Grid layouts collapse before they overflow
- Modals fit the dynamic mobile viewport
- Native fallback controls receive FG UI shell styling
Build larger interfaces from shared pieces
Components can be composed without creating product-specific copies.
What FG UI does not depend on
Never required
- Bootstrap
- UIkit
- Font Awesome
- Google Fonts
- Remote CSS or JavaScript
Always preferred
- Shared FG UI components
- Central design tokens
- Local Manrope
- Accessible interaction states
- Responsive component behaviour
Build provenance
Every private FG UI build carries a version, build ID, origin signature and archived release hashes. These identifiers are provenance records, not tracking code.
Current build
Privacy
FG UI does not phone home, beacon usage or require a remote licensing server. Provenance identifiers stay inside local files and release archives.
Six simple methods
Most FG UI markup works automatically. The API is only needed for dynamic content or imperative actions.
FGUI.init(root)
FGUI.open(target)
FGUI.close(target)
FGUI.toggle(target)
FGUI.toast(message, options)
FGUI.icon(name, options)