Dokumentace v1.0.1 Public Release Aktualizováno: 2026-10-20

AeroGlass UI Framework — Manuál & Implementace

Kompletní průvodce integrací a používáním frameworku AeroGlass UI v1.0.1. Tento dokument popisuje vložení do vašich projektů, dostupné CSS třídy, barvy, přístupnost (WCAG 2.2 AA), mini editor vzhledu, EU cookies a metody vanilla JavaScript enginu.

1. Rychlý start & Způsoby integrace

AeroGlass UI je samostatný framework bez nutnosti instalovat npm balíčky na produkčním serveru. Můžete jej připojit buď z CDN serveru theme.apq.cz, nebo zkopírovat soubory přímo do vašeho projektu.

Možnost A: Přímé vložení z theme.apq.cz CDN (Doporučeno)

<!-- AeroGlass UI Framework v1.0.1 -->
<link rel="stylesheet" href="https://theme.apq.cz/v/1-0-1/aeroglass.min.css">
<script src="https://theme.apq.cz/v/1-0-1/aeroglass.min.js"></script>

Možnost B: Plovoucí odkaz na vždy nejnovější verzi přes /latest

<!-- Automaticky přesměruje na poslední stabilní verzi -->
<link rel="stylesheet" href="https://theme.apq.cz/latest/aeroglass.min.css">
<script src="https://theme.apq.cz/latest/aeroglass.min.js"></script>

Možnost C: Šablona pro PHP 8.3 (index.php)

<?php
declare(strict_types=1);
?>
<!DOCTYPE html>
<html lang="cs" data-ag-theme="light" data-ag-fontsize="md">
<head>
    <meta charset="UTF-8">
    <title>Můj projekt na AeroGlass UI</title>
    <link rel="stylesheet" href="https://theme.apq.cz/v/1-0-1/aeroglass.min.css">
</head>
<body>
    <div class="ag-board" style="max-width: 1000px; margin: 40px auto; padding: 24px;">
        <h1>Vítejte v AeroGlass UI</h1>
        <button class="ag-btn ag-btn--primary" onclick="AeroGlass.toast({title: 'Ahoj!', message: 'Framework funguje perfektně.'})">
            Klikněte zde
        </button>
    </div>
    <script src="https://theme.apq.cz/v/1-0-1/aeroglass.min.js"></script>
</body>
</html>

2. Design Tokens, Světlý & Tmavý režim, Skiny

Framework využívá moderní CSS custom properties. Všechny barvy automaticky přepínají kontrast při změně atributu data-ag-theme="dark" na tagu <html>.

Atribut / Token	Hodnoty	Popis
`data-ag-theme`	`light` \| `dark`	Přepíná globální iridiscentní schéma. V tmavém režimu aplikuje hluboké obsidiánové gradienty a vysoký WCAG kontrast.
`data-ag-fontsize`	`sm` \| `md` \| `lg` \| `xl`	Mění měřítko písma v celé aplikaci přes `--ag-font-scale` (0.9x / 1.0x / 1.1x / 1.2x).
`data-ag-blur`	`off` \| `low` \| `normal` \| `high`	Nastavuje sílu skleněného rozostření (0px / 8px / 24px / 40px) přes `backdrop-filter`.
`data-ag-skin`	`prism` \| `cyber` \| `emerald` \| `amber` \| `obsidian`	Aktivuje barevný akcent pro karty a zvýrazněné desky.

3. Katalog komponent & Ukázky

3.1 Tlačítka (.ag-btn, .ag-squircle-btn, .ag-filter-pill)

<button class="ag-btn ag-btn--primary">Primární tlačítko</button>
<button class="ag-btn ag-btn--secondary">Sekundární tlačítko</button>
<button class="ag-squircle-btn">⚙️</button>
<button class="ag-filter-pill ag-active">Aktivní filtr</button>

3.2 Odznaky (.ag-badge)

Primární Úspěch / Hotovo Čeká Chyba Informace

<span class="ag-badge ag-badge--primary">Primární</span>
<span class="ag-badge ag-badge--success">Úspěch</span>
<span class="ag-badge ag-badge--warning">Čeká</span>
<span class="ag-badge ag-badge--danger">Chyba</span>
<span class="ag-badge ag-badge--info">Informace</span>

3.3 Formulářové prvky (.ag-input, .ag-select, .ag-switch)

Aktivní stav přepínače

<input type="text" class="ag-input" placeholder="Zadejte hodnotu...">
<select class="ag-select">
    <option>Vyberte možnost...</option>
</select>
<input type="checkbox" class="ag-switch" checked>

4. Vanilla JavaScriptové API (AeroGlass)

Skript aeroglass.min.js automaticky registruje globální objekt window.AeroGlass. Poskytuje čisté metody bez externích knihoven.

Metoda	Příklad použití	Popis
`AeroGlass.toast(opts)`	`AeroGlass.toast({title: 'OK', message: 'Uloženo', type: 'success'})`	Zobrazí animovaný toast. Typy: `info`, `success`, `warning`, `danger`.
`AeroGlass.toggleTheme()`	`AeroGlass.toggleTheme()`	Přepne mezi světlým a tmavým režimem a uloží preferenci do localStorage.
`AeroGlass.setFontSize(size)`	`AeroGlass.setFontSize('lg')`	Nastaví velikost písma: `'sm'`, `'md'`, `'lg'`, `'xl'`.
`AeroGlass.setBlur(level)`	`AeroGlass.setBlur('high')`	Nastaví úroveň skleněného blur filtru: `'off'`, `'low'`, `'normal'`, `'high'`.
`AeroGlass.setSkin(skin)`	`AeroGlass.setSkin('cyber')`	Aktivuje barevný akcent karet (`'prism'`, `'cyber'`, `'emerald'`, `'amber'`, `'obsidian'`).
`AeroGlass.cookies.openSettings()`	`AeroGlass.cookies.openSettings()`	Otevře modální okno pro detailní nastavení EU cookies a soukromí.
`AeroGlass.studio.open()`	`AeroGlass.studio.open()`	Otevře Mini Editor vzhledu (AeroGlass UI Studio).