Marka
Znaki Skribly i małe plakietki tożsamości wokół nich: logo, logotyp słowny, zestaw aplikacji, osoby, agenci, hosty git, trackery i strony. Plakietki używają liter na odcieniu tokenu koloru, więc są czytelne w każdym motywie i nigdy nie opierają się na samym kolorze.
Strony: 10, eksporty: 10
- Logo
- Pattern
- Wordmark
- AppLockup
- Avatar
- AgentAvatar
- AgentChip
- VcsBadge
- TrackerBadge
- FaviconLetter
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { Logo, Pattern, Wordmark, AppLockup, … } from '@skribly/ui/brand'Strony tej grupyLink do sekcji Strony tej grupy
- LogoZnak Skribly, zwykły albo ze znakiem i kolorem produktu. Każdy produkt ma swój, zapisany w marks; produkty różnią się znakiem i kolorem i niczym więcej. Na ciemnym panelu bocznym użyj tone="nav".Logo
- PatternSześć deseni marki narysowanych z bloków i kropek znaku: grid, dots (kropkowany margines), mosaic, ruled, hero i empty. Pierwsze pięć leży za treścią w kolorze produktu; empty to mały obrazek dla stanu braku danych. Wczytaj patterns.css, który dołączają plain.css i styles.css.Pattern
- WordmarkZapisana nazwa z pierwszą literą w bursztynowym kafelku, na front strony albo ekran startowy. W obramowaniu aplikacji użyj AppLockup.Wordmark
- AppLockupLogo z nazwą Skribly i nazwą narzędzia, do paska tytułu, panelu bocznego i stron logowania. Dodaj href, aby było linkiem do strony głównej; compact zostawia tylko logo w zwiniętym panelu bocznym.AppLockup
- AvatarOsoba jako inicjały albo zdjęcie, na listach, w komentarzach i polach przypisania. Bez nazwy rysuje przerywane koło nieprzypisanego.Avatar
- AgentAvatarKwadratowy kafelek z literami agenta programistycznego, na listach sesji, kartach i plakietkach. Aplikacja przekazuje litery i kolor z własnej listy agentów.AgentAvatar
- AgentChipAgent jako mała pigułka z awatarem, nazwą i wersją, do rzędu gotowych agentów. Brakujący agent dostaje przerywaną krawędź i może stać się przyciskiem, który go instaluje.AgentChip
- VcsBadgeHost git konta albo repozytorium: GitHub, GitLab, Bitbucket, Gitea lub Azure DevOps. Przekaż awatar konta jako src, aby pokazać osobę.VcsBadge
- TrackerBadgeTracker zgłoszeń, z którego pochodzi konto albo zadanie, w ustawieniach i na listach zadań.TrackerBadge
- FaviconLetterIkona strony z literą zastępczą, do kart przeglądarki, zakładek i list linków. Literą jest pierwsza litera hosta, bez www.FaviconLetter