Ingot je designový systém Forgmaticu — sada rozhodnutí o barvě, typografii, prostoru a chování. Není to galerie komponent.
Ingot je designový systém Forgmaticu — sada rozhodnutí o barvě, typografii, prostoru a chování, ze které se skládá administrace tenanta, administrace platformy i veřejné stránky. Není to galerie komponent. Je to dohoda, jak vypadá práce ve výrobě přeložená do obrazovky.
Tokeny a třídy na jednom místě. Obrazovka se z nich skládá — nevzniká z vlastních stylů psaných až v ní. Proto se změna rozhodnutí projeví všude, a ne jen tam, kde si na ni někdo vzpomene.
Pro designéry i vývojáře. Stejný slovník na obou stranách znamená, že návrh a kód mluví o téže věci — a nikdo mezi nimi nepřekládá dva popisy jedné obrazovky.
Nová komponenta nevzniká v obrazovce. Nejdřív vznikne v systému, dostane pravidlo a název, a teprve pak se použije.
Data před dekorací
Rozhraní administrace je hustý zápis skutečnosti. Žádné ozdobné plochy ani barevné přechody — plocha slouží tomu, aby se v ní dala číst čísla.
Kontrast dělá strukturu
Pozadí stránky je vždy tmavší než karta. Hierarchii nese odsazení a linka, ne stín a ne barva.
Jeden akcent
Akcent je jedna rodina čtyř tokenů. Barva navíc znamená nový význam — a ten musí být pojmenovaný, ne vymyšlený až v obrazovce.
Fakta jsou mono
Čísla, kódy, identifikátory, rozměry a časy patří do neproporcionálního písma s tabulkovými číslicemi. Text vysvětluje, mono měří.
Tenant = platform
Obě administrace sdílí jednu lištu i jedny komponenty. Liší se odznakem u značky a obsahem sekcí — nikdy vlastním vzhledem.
Jazyk uživatele
Popisky mluví řečí dílny, ne databáze. Odborný termín se uvádí jen tam, kde ho výroba sama používá.
Systém má čtyři vrstvy a každá odpovídá na jinou otázku. Než něco přidáš, patří rozhodnout, do které z nich to patří — vrstva určuje, kde se ta věc mění a co změna zasáhne.
| Vrstva | Kde žije | Kdy sáhnout |
|---|---|---|
| Tokeny | Kořen systému — jediné místo, kde je hodnota deklarovaná. | Barva, mezera, rádius, stín, písmo. |
| Prvky | Vrstva nad tokeny — tlačítko, pole, štítek. | Jednotlivé ovládání a značky. |
| Bloky | Složeniny z prvků — tabulka, karta kroku, prázdný stav. | Opakující se části obrazovky. |
| Shell | Rám aplikace — horní lišta, drobečky, hlavní plocha. | Rám každé stránky administrace. |
Všechno se importuje z jednoho místa:
import { IngotTable, IngotEmptyState } from "@/ingot";Vždycky přes tenhle jeden vstup, nikdy hlubší cestou na konkrétní soubor. Co odsud vede ven, je veřejné rozhraní kitu a mění se ohlášeně; co ne, je vnitřek a smí se přejmenovat nebo rozdělit kdykoli. Součástí toho rozhraní jsou i typy, které si prvek žádá — třeba IngotColumn pro sloupce tabulky.
Nové primitivum vzniká, až si o něj řekne konkrétní obrazovka. Když ten žadatel je, patří k sobě tři věci v jedné změně: komponenta a její vyvedení z @/ingot, stránka na tomhle webu s živou ukázkou, a první obrazovka, která ji doopravdy používá.
Ukázku musí stránka vykreslit skutečnou komponentou. Opsané JSX vypadá v den zápisu stejně a od druhého dne tiše lže.
Každá stránka komponenty má stejnou stavbu: živou ukázku i s kódem, kdy použít a kdy nepoužít, tabulku vlastností, přístupnost a překlady. Tam, kde první verze něco schválně neumí, je to vypsané taky. Pravidlo o překladech je společné všem prvkům, takže má vlastní stránku — Překlady.
Pravidlo palce. Píšeš-li do obrazovky vlastní barvu, mezeru nebo rádius, platí jedno ze dvou: buď existuje token, který jsi nenašel, nebo systému chybí rozhodnutí. Obojí se řeší v systému, ne v komponentě.