Documentation

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.

Quick start

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.

HTML
<link rel="stylesheet" href="assets/css/fgui.css">
<script src="assets/js/fgui.js"></script>
CSS

Components use the `.fgui-*` namespace

Button markup
<button class="fgui-btn fgui-btn--primary">
  Save changes
</button>
JavaScript

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.

One behaviour implementation means fixes can be released once.
Composition

Build larger interfaces from shared pieces

Example card
Uses the shared card system
Ready

Components can be composed without creating product-specific copies.

Permanent rules

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