Labloom

Na drodze do elastyczności zauważyliśmy, że kolory muszą być ukierunkowane na ich przeznaczenie. Ten sam kod HEX może być używany wielokrotnie w projekcie, ale nie oznacza to, że jego funkcja zawsze pozostaje taka sama. Na przykład kolor biały #FFFFFF może być użyty zarówno jako kolor powierzchni, jak i kolor tekstu na powierzchni przycisku. Jednak jeśli chcemy przetłumaczyć ten token na tryb ciemny, pojawia się problem:

Podsumowując, stworzyliśmy system nazewnictwa tokenów kolorystycznych inspirowany Material UI, aby zachować elastyczność w różnych produktach. Takie rozwiązanie ogranicza zasoby deweloperskie potrzebne do rozpoczęcia projektów.

Tekst zawiera dwa podstawowe tokeny: Rodzinę czcionek i Ustawienia typograficzne. Podobnie jak w przypadku tokenów kolorystycznych, zalecamy nadawanie im nazw opartych na przeznaczeniu, a nie na rozmiarze. Rodzina czcionek to specjalny typ tokena, który wpływa na tokeny Ustawień typograficznych.

Używamy trzech podstawowych układów siatki: 4-kolumnowej dla urządzeń mobilnych, 8-kolumnowej dla tabletów oraz 12-kolumnowej dla komputerów stacjonarnych.

Kształty to cichy członek rodziny atomów. Często są postrzegane jedynie jako ikony, jednak warto pamiętać, że każdy prostokąt czy okrąg użyty w projekcie również jest kształtem – choć rzadko bywa wymieniany jako komponent.

Ruch jest kluczowy dla sukcesu, ale to także bardzo szeroki temat. Nasz system animacji mógłby stanowić osobne studium przypadku. Na ten moment wyróżniamy dwa typy tokenów: $Bezier-Type oraz $Duration. Określone krzywe Béziera i czasy trwania są z góry zdefiniowane dla konkretnych typów akcji w całym systemie projektowania.

Molekuły składają się z kolekcji wielu atomów.

To samo podejście stosujemy w innych molekułach, takich jak: Odznaki (Badges), Pola wyboru (Checkboxes), Etykiety (Chipses), Zwijane sekcje (Collapses), Powiadomienia (Flies), Pola wejściowe (Inputs), Wskaźniki ładowania (Loaders), Przyciski radiowe (Radio Buttons), Wyszukiwanie (specyficzny typ pola wejściowego), Kroki (Stepers) oraz Przełączniki (Switches).

Organizmy to duże komponenty interfejsu. Ich konstrukcja jest złożona – zawierają wiele atomów oraz co najmniej jedną molekułę.

Szablony to bardzo zaawansowany typ struktury atomowej. Są to w większości gotowe do użycia sekcje, które służą do tworzenia niestandardowych stron.

Wyświetlanie szablonów dla typów treści dostępnych w Squidex CMS.