gh_docs_bot
Fluid UI
Modern CSS Framework (for gh_docs_bot)
Fluid UI
is a lightweight, modern CSS framework built for performance and
flexibility. It leverages OKLCH colors for better
perceptional consistency, Fluid typography using
clamp(), and a modular layout system.
Table of Contents
ToC (Alternative Navigation)
Alternative Navigation with different (Mobile) Layout
Theme Preview
Fluid UI supports multiple themes out-of-the-box
Standard Theme (Cool Blue)
Natural Green
Warm & Friendly
Rose & Fruity
Deep Purple & Elegant
Neutral Industrial Slate
Refreshing Teal
Indigo (Legacy Port)
Terminal Neon Green
Futuristic Electric Cyan
Design Tokens
Core design properties are managed via CSS variables for consistency and easy customization.
Radius
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-pill: 999px;Spacing
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;Typography (Fluid)
--font-size-root: clamp(16px, 1.2vw + 0.5rem, 22px);
--font-size-small: clamp(0.8rem, 0.96vw + 0.4rem, 1.1rem);
--font-size-smaller: clamp(0.7rem, 0.84vw + 0.35rem, 0.96rem);
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;Motion
--transition-fast: 0.18s ease-out;
--transition-normal: 0.25s ease;Colors & Themes
Fluid UI uses semantic variables that automatically adapt to light/dark modes and selected themes.
--bg, --bg-alt, --bg-elevated
--color-primary, -soft, -dark
--text, --text-muted,
--border
Typography
Fluid UI uses clamp() for responsive heading sizes that
scale smoothly between mobile and desktop.
Heading 1 (Hero)
Heading 2 (Section)
Heading 3 (Sub-section)
Heading 4
Heading 5
Heading 6
Standard paragraph text using --font-family-sans. It aims
for high readability with proper line height (1.75 on large text
blocks).
Muted text for secondary information.
Brief text with an indicator prefix.
Layout System
App Shell
The .app-shell provides a classic Header-Main-Footer
structure using CSS Grid.
<div class="app-shell">
<header class="site-header">...</header>
<main class="site-main">...</main>
<footer class="site-footer">...</footer>
</div>Sidebar Layout
The .layout-with-sidebar component handles responsive
sidebars (side-by-side on desktop, stacked on mobile).
Utilities
A collection of utility classes for quick styling without writing custom CSS.
Flexbox
.flex, .inline-flex, .flex-col, .flex-row, .flex-wrap
.items-center, .justify-between, .gap-2Grid
.grid, .grid-cols-2, .grid-gap-3
.grid-auto-sm (180px), .grid-auto-md (240px), .grid-auto-lg (320px)Spacing
.m-0, .mt-2, .mb-4, .p-3, .px-2, .py-2Typography & Text
.text-center, .text-muted, .text-bold, .text-smallerForms
Cards
Cards are the primary container for content blocks, using
--bg-elevated.
This is a standard card with a header, title and subtitle. It uses
--radius-lg and a soft shadow.
Badges & Chips
Tabs
System Overview
gh_docs_bot ist darauf ausgelegt, Dokumentationen extrem schnell zu bauen.
Core Features
- C++23 Core Engine
- Plugin System Architecture
- Fluid UI Framework Integration
Latest Changes
v2.2.1: Support für ODT/DOCX Dateien hinzugefügt.
Accordion
Toasts & Tooltips
Images & Gallery
Supports lazy loading, figcaptions, and a built-in modal gallery.
.lazy-img and
data-modal-image.
Tables
Clean, themed tables with zebra striping and hover effects.
| Token | Value | Description |
|---|---|---|
--bg-table-odd | var(--bg-alt) | Background for odd rows |
--bg-table-even | var(--bg-elevated) | Background for even rows |
Status Variants & Message Boxes
The service is running normally.
A new update is available.
Database connection lost.