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říklad Stack komponenty implementované v CSS

Příklady Stack komponenty:

Stack
Stack is a layout utility component that makes it easy to stack elements together and apply a space between them.
Stack - Shopify Polaris
Our style guide helps us collaborate across disciplines to build a great experience for all of Shopify’s merchants. It promotes consistency, but it’s not a blueprint. Be creative, explore, and evolve the system.
React Stack component - MUI
The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.

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říklad Inline komponenty implementované v CSS

Příklady Inline komponenty:

Inline — Braid Design System
Themeable design system for the 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říklad Spacer komponenty implementované v CSS

Příklady Spacer komponenty:

Spacer | Duet Design System
Duet provides a set of organized tools, patterns, and practices that work as the foundation for LocalTapiola and Turva digital products.
GitHub - LinusU/react-spacer: An element to repesent space between other elements, for use in flexbox layouts
An element to repesent space between other elements, for use in flexbox layouts - GitHub - LinusU/react-spacer: An element to repesent space between other elements, for use in flexbox layouts

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říklad použití Flex komponenty v JSX

Příklady Flex komponenty:

Flexbox - MUI
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
GitHub - misaeldossantos/react-smart-layout: Simple flexbox abstraction for react-native and react for web
Simple flexbox abstraction for react-native and react for web - GitHub - misaeldossantos/react-smart-layout: Simple flexbox abstraction for react-native and react for web

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

A Complete Guide to Grid
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
CSS Grid Layout - CSS: Cascading Style Sheets | MDN
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.


CSS grid generator

GitHub - sdras/cssgridgenerator: 🧮 Generate basic CSS Grid code to make dynamic layouts!
🧮 Generate basic CSS Grid code to make dynamic layouts! - GitHub - sdras/cssgridgenerator: 🧮 Generate basic CSS Grid code to make dynamic layouts!

Tradiční grid řešení:

Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
React Grid component - MUI
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

CSS grid abstrakce:

Grid component | Orbit
Implements a CSS grid valid even in older browsers.
Grid
React UI is a themeable UI library for React apps.
CSS Grid
Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.

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.

Odběr novinek

Nechte si posílat nové články na email.

You've successfully subscribed to DesignSystémy.cz
Vítejte zpět! Přihlášení proběhlo úspěšně.
Výborně, Váš email byl potvrzen.