FG
FG Tools UI / UX Visual Selection Board
Real FG Bible + GetBible source styles, grouped by reusable UI role
ForGoodTools · FGUI discovery stage

Pick the visuals, not the old class names.

This page puts similar FG Bible, frontend, installer and GetBible styles next to each other. The selector shown on each specimen is only the source of the style. When we build lib_fgui, the winning visual will receive a clean reusable name such as .fgui-card, .fgui-tabs or .fgui-loader.

How to use it: Shortlist anything you like. You can shortlist several competing styles in the same category. When you are sure, use Set final. Your choices stay in this browser. Export them when you want me to turn the winners into the real FGUI library.

Page heroes and product headers

Choose the overall heading language future FG Tools screens should use.

4 existing styles
Standard admin page hero
Reusable role: normal page header
.fg-admin-page-hero
Existing
FG Bible

Translations

Manage local Bible translations and their availability.

FG Bible dashboard hero
Reusable role: product dashboard header
.fg-admin-page-hero--dashboard
Existing
ForGoodTools

FG Bible

A complete local Bible experience built for Joomla.

FG
Installer product hero
Reusable role: lifecycle / success header
.fg-installer-hero
Existing
ForGoodTools

FG Bible

Version 1.0.144 · Installation complete
Ready
GetBible provider hero
Reusable role: branded provider header
.fg-getbible-hero
Existing
GetBible
Optional Scripture Provider

GetBible integration

Use remote translations while keeping FG Bible independent and locally resilient.

♥Independent integrationProvider identity stays intact while the surrounding UI follows FG Tools.

Cards and content panels

These are the main competing surface styles currently used across FG Bible and the provider.

5 existing styles
Shared admin card
Role: general content card
.card
Existing
General information
FG Tools card

The shared admin stylesheet already normalises ordinary Joomla cards.

Dashboard card
Role: dashboard module / major panel
.fg-dashboard-card
Existing
Bible Data

Local translations

WEB and KJV are stored locally and available to the reader.

Ready
Bible data package
Role: structured package / status card
.fg-bible-data-package .h-100
Existing
WEB

World English Bible

Local Scripture package

Ready
31,102 verses available locally.
GetBible card
Role: provider content card
.fg-getbible-card
Existing
Provider settings

Remote access

Enabled

Serve cached Scripture locally and request missing chapters according to the selected mode.

My Bible summary card
Role: frontend account/stat card
.fg-my-bible__summary-card
Existing
★
14
Saved verses

Primary action buttons

Choose the core action language that should eventually become the FGUI button family.

5 existing styles
Admin primary
Role: standard primary action
.btn.btn-primary
Existing
Data install action
Role: prominent long-running action
.fg-data-install-button
Existing
Frontend primary
Role: normal reader action
.uk-button.uk-button-primary
Existing
My Bible navigation button
Role: section selector / segmented action
.fg-my-bible__nav-button
Existing

Status badges, pills and state indicators

Several status languages currently exist. Pick the one you want to become consistent.

4 existing styles
Shared admin badges
Role: small state pill
.badge.bg-success
Existing
ReadyCheck dataErrorInformation
Bible data status
Role: package / readiness status
.fg-bible-data-status
Existing
ReadyNeeds attentionErrorPackage found
Installer status
Role: large outcome pill
.fg-installer-status
Existing
✓ Everything ready
Reader source badge
Role: compact frontend source state
.fg-bible-source-badge
Existing
Local GetBible

Alerts, notices and explanatory callouts

Compare the different ways FG currently communicates information and warnings.

4 existing styles
Admin alert
Role: system information / warning
.alert.alert-info
Existing
Bible data is local.
Nothing is fetched from an external Bible API.
Attention: this action removes saved data.
Bible data note
Role: quiet explanatory note
.fg-bible-data-note
Existing
This package installs Scripture into FG Bible's local tables and can be removed independently.
GetBible note
Role: provider explanation
.fg-getbible-note
Existing

All modes share the same local cache, request locking and last-known-good Scripture.

Frontend alert
Role: reader information state
.uk-alert-primary
Existing
Tip: select a verse to save, highlight or share it.

Fields, selects and input controls

Pick the control language you want reused in settings, filters and frontends.

4 existing styles
Shared admin controls
Role: standard settings field
.form-control / .form-select
Existing
Custom FG select
Role: branded select / option menu
.fg-select
Existing
World English Bible ✓
King James Version
GetBible setting row
Role: provider configuration field
.fg-getbible-setting
Existing

Remote requests happen only after an explicit action.

Frontend search input
Role: prominent search control
.fg-search-input
Existing

Tabs and section navigation

This is a key choice for the future FGUI navigation language.

4 existing styles
Record form tabs
Role: administrator content tabs
.fg-admin-record-form joomla-tab
Existing
Translation details

Standard administrator tab language.

Guide tabs
Role: simple segmented information tabs
.fg-guide-tab-label
Existing

How administrators manage the Bible.

Reader pill tabs
Role: frontend primary section switcher
.fg-reader-tabs
Existing

Tables and data presentation

Compare dense administrator data with provider and frontend result presentation.

3 existing styles
GetBible comparison table
Role: mode/features comparison
.fg-getbible-mode-table
Existing
ModeCachedMissing
Local OnlyLocalBlocked
ManualLocalLoad button
Mobile search result card
Role: responsive data alternative
.fg-search-result-card
Existing
John 3:16WEB
For God so loved the world...
Open chapter →

Empty states

What should an FG Tools screen look like when there is nothing to show yet?

3 existing styles
Administrator empty state
Role: empty admin list
.fg-admin-empty-state
Existing
＋
Nothing here yet

No notes found

Create your first note and it will appear here.

FG Modern empty card
Role: reader feature empty state
.fg-modern-empty-state
Existing
♡

No bookmarks yet

Save a verse and it will be available in My Bible.

My Bible empty state
Role: compact saved-data empty state
.fg-my-bible__empty
Existing
No highlights yet

Add a highlight from any verse and it will appear here.

Loaders and progress

This includes your example: selecting a whole loader style as the source for the future reusable FGUI loader.

3 existing styles
Installer loader
Role: full-width progress status
.fg-installer-loader
Existing
Finalising and checking FG Bible68%
Checking local Bible data and Joomla integration...
Bible data progress
Role: compact card progress
.fg-bible-data-progress
Existing
WEB importImporting
22,402 / 31,102 verses
Maintenance live scan
Role: multi-step live operation
.fg-maintenance-live
Existing
Running maintenance scanLive
✓DatabaseHealthy
2FilesChecking

Modals and confirmations

Choose the dialog language for destructive actions, providers and frontend tools.

3 existing styles
FG admin confirm modal
Role: destructive confirmation
.fg-confirm-modal
Existing
!

Remove all local Bible data?

This cannot be undone.

The component files remain installed.
GetBible confirm modal
Role: provider destructive confirmation
.fg-getbible-confirm-modal
Existing
!

Clear GetBible cache?

The provider can fetch missing Scripture again later.

Cached chapters will be deleted.
Modern share dialog
Role: rich frontend modal
.fg-modern-share__dialog
Existing
↗

Share Scripture

John 3:16 · WEB

Share text

For God so loved the world...

Install, uninstall and destructive lifecycle blocks

These should also become part of FGUI so every future FG extension has the same professional lifecycle experience.

3 existing styles
Installer summary metrics
Role: installation/update health summary
.fg-installer-summary
Existing
2Translations
31kVerses
0Errors
8Checks
Uninstall status row
Role: pre-uninstall impact/status item
.fg-uninstall-status-card
Existing
Joomla user data
Notes, tags, highlights and bookmarks
Will be removed
Danger zone
Role: irreversible action container
.fg-uninstall-danger-zone
Existing
Danger zone

Complete wipe

Remove FG Bible plus all component-owned local data.

Frontend reader navigation and tools

Pick the language that should guide reusable frontend controls in future FG extensions.

4 existing styles
Current chapter heading
Role: frontend context header
.fg-bible-current-chapter
Existing
World English Bible
John 3
Reader tool buttons
Role: compact icon actions
.fg-reader-tool
Existing
Classic chapter navigation
Role: previous / next navigation
.fg-chapter-nav
Existing
← John 2John 4 →
Floating chapter arrows
Role: edge navigation
.fg-floating-chapter-link
Existing
←→

FGUI completion candidates

These do not currently exist as a complete reusable FG component. I designed them from the dominant language already present: #1991ee, white surfaces, subtle blue-grey borders, 9–14px controls, 14px cards, low shadows and clear status colour.

6 proposed components
Toast notification
Missing role: temporary feedback
Candidate: .fgui-toast
Proposed
✓
Settings saved
Your FG Bible preferences were updated.
Skeleton loader
Missing role: content placeholder
Candidate: .fgui-skeleton
Proposed
Pagination
Missing role: reusable paged navigation
Candidate: .fgui-pagination
Proposed
Breadcrumbs
Missing role: location/context trail
Candidate: .fgui-breadcrumbs
Proposed
FG Tools›FG Bible›Translations
File upload / dropzone
Missing role: package and file import
Candidate: .fgui-dropzone
Proposed
↑
Drop a package here
or choose a ZIP file from your computer
Multi-step process
Missing role: onboarding / setup / migration
Candidate: .fgui-stepper
Proposed
✓
Install
Complete
2
Data
Current
3
Ready
Next

Complete FG class inventory

The board above focuses on reusable visual families. This searchable inventory makes sure the source classes are not lost while we curate the system.

Loading…