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:

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:

Univerzá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:

Grid

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

CSS grid generator

Tradiční grid řešení:

CSS grid abstrakce:

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.