Layoutové komponenty v design systémech
Bavíme-li se o komponentách design systému, napadnou vás asi převážně prvky jako tlačítka, ikony a podobné. Design systémy však vývojářům mohou nabídnout mnohem více. Podívejme se spolu na rychlý přehled možných komponent, které ovlivňují layout a mezery mezi elementy.
Mezery v design systému
Při tvorbě design systému dříve či později narazíte na potřebu systematizovat práci s layoutem a mezerami. I pokud váš design systém nenabízí komplexní komponenty, vždy bude existovat nutnost vytvářet větší kompozice z jiných komponent design systému.
Design systémy vnímají komponenty pro někoho trochu netradičně, jelikož pojímají komponenty izolovaně. Komponenty design systému předem neznají kontext, v kterém budou zobrazeny, a je tedy nutné, aby neexistoval margin na komponentách. Vnější odsazení je třeba přidávat až v daném kontextu. Možná se ptáte, proč je margin problematický. Je to proto, že margin vyjadřuje závislost mezi dvěma sousedními prvky a je tedy závislý na kontextu, v kterém se zobrazí. Stejná komponenta může vyžadovat v jednom seznamu 0.5rem mezeru a v jiném třeba 1rem. Oba požadavky jsou však naprosto v pořádku a design systém je musí umožnit.
Kvůli tomuto přístupu můžeme pozorovat vznik nových principů pro usnadnění vývoje. Třeba jako existence rodičovských komponent, které ovlivňují své potomky a vkládají mezi ně mezery. Pojďme si takováto a jiná řešení přiblížit jako inspiraci, jak lze řešit problém mezer a layoutů v kontextu design systémů.
Stack
Jedna z nejrozšířenějších komponent na principu ovlivnění potomků je Stack. Tato komponenta umožňuje jednoduše ovládat rozložení prvků nebo seznamů. Funguje tak, že přidává stejně velkou mezeru mezi své potomky, a to ve většině případů ve vertikální rovině. Některé implementace však dávají možnost i horizontální mezery.
Pro lepší představu, v čisté CSS implementaci to může vypadat takto:
.stack.small > * {
margin-bottom: var(--space-small);
}Příklady Stack komponenty:
Inline
Inline je trošku speciálním případem Stack komponenty. Přidává totiž mezeru jak horizontální, tak vertikální, a to primárně pro použití v situacích, kde očekáváte, že se prvky budou zalamovat na řádku a vy proto potřebujete zajistit správný rozestup v obou směrech.
Co se týká CSS implementace, v podstatě nejde o nic jiného než o vlastnost gap pro flexbox. Dejte si však pozor v případě, že potřebujete i podporu starších prohlížečů, v kterých gap nemusí být podporován.
.inline.small {
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-small);
}Příklady Inline komponenty:
SEEK Group
Spacer
Spacer komponenta jde proti proudu předchozích příkladů. Neovlivňuje ostatní komponenty, naopak sama je mezerou v layoutu. Možným problémem je, že s použitím Spacer komponenty narůstá počet prvků v DOM: mezery jsou také samotné HTML prvky a nejedná se tak pouze o CSS pravidlo, jako je tomu v předchozích případech. To ale nic nemění na jednoduchosti a pohodlnosti použití takové komponenty.
Samotné implementace jde docílit buďto pomocí CSS vlastnosti margin, padding anebo height, třeba takto:
.spacer {
width: 100%;
height: var(--space-small);
}Příklady Spacer komponenty:
LocalTapiola
LinusUUniverzální komponenty ovlivňující layout
Co ale v situaci, kdy Stack nebo Inline nevystačí na složitější layout? Přeci jen tyto komponenty řeší rozestup mezi prvky, což je jen dílčí problém každodenní práce s layoutem. Jedním z řešení mohou být univerzálnější komponenty, které při vytváření layoutu najdou širší využití.
Flex
Flex nebo Flexbox je nízkoúrovňová komponenta pro práci s layouty. Často se s touto abstrakci setkáte v komponentových knihovnách pro frameworky jako React nebo Vue. Jedná se totiž o možnost jak napojit design tokeny na univerzální použití, ulehčit tak jejich používání a často i zlepšit práci s responzivním designem.
Implementačně jde o abstrakci nad flexbox layoutem. Flex komponenta tedy obsahuje abstrakci většiny nebo všech flexbox vlastností jako flex-direction, justify-content atd. Ty bývají často upravené nebo jinak zkrácené pro snazší používání při vývoji, např. justify-content můžeme nalézt pod názvem justify a podobně.
<Flex wrap={false} direction="row">
...
</Flex>Příklady Flex komponenty:
misaeldossantosGrid
Asi nejtradičnější komponenta, která se vztahuje k layoutu. Jak název napovídá, jedná se o mřížku, na které můžeme rozvrhnout rozložení celé stránky. Běžným příkladem takového systému je Grid z UI frameworku Bootstrap. V dnešní době se můžete setkat jak s Gridem postaveným na flexboxu, tak se samotným CSS gridem, který je nativním řešením v CSS. Nenechte se ale splést, protože tato dvě řešení, i když se stejným názvem, jsou rozdílná v implementaci i v tom, jaké možnosti uživatelům nabízejí.
Tradičnější řešení vzniklá před představením nativního gridu jsou postavena na flexboxu, který je také systémem pro rozložení prvků, avšak pouze v jedné dimenzi. Práce s takovým systémem může být již z dnešního pohledu složitější než práce s nativním CSS gridem nebo jeho možnou abstrakcí. Těch existuje spousta, přestože CSS Grid je velice intuitivní a nutně nepotřebuje abstrakci, aby se dobře používal. Níže přikládám spoustu zajímavých referencí o CSS gridu.
O CSS grid
Chris House
CSS grid generator
sdrasTradiční grid řešení:
Mark Otto, Jacob Thornton, and Bootstrap contributors
CSS grid abstrakce:
Mark Otto, Jacob Thornton, and Bootstrap contributors
Shrnutí
Design systémy nemusí poskytovat pouze atomické komponenty, ale i abstraktnější set nástrojů pro systematickou práci s CSS. Jeden ze způsobů jak design systém může ulehčit práci svých uživatelů je poskytnutí nástrojů pro layout a mezer v layoutu. Některé z těchto principů jsme si představili v tomto rychlém přehledu. Z osobní zkušenosti jsou to prvky, které se jako vývojář design systémů snažím poskytnout jako jedny z prvních, abych usnadnil práci našim uživatelům.
