UI knihovny a kde je použít

Při vývoji webu často přicházíme na to, že mnohé designové elementy a komponenty se opakují. Namísto repetetivního psaní stejného kódu od nuly jsou tu UI knihovny, které nám umožňují využívat již vytvořené komponenty. Takto nejen šetříme čas, ale také udržujeme konzistenci a kvalitu designu. Je zde ale nutné poznamenat, že ne vždy je vhodné používat UI knihovny. V některých případech je lepší vytvořit si vlastní komponenty, které budou přesně odpovídat našim potřebám.

A protože je jednodušší ukazovat kód, podívejme se spolu na tlačítko v různých úrovních abstrakce. Kód ke všem ukázkám najdete v tomto repozitáři.

Level 0: Čisté CSS

CSS je základní stavební kámen webového designu. Umožňuje nám vytvářet styly pro naše webové stránky. Styly můžeme psát přímo do HTML dokumentu, nebo je můžeme oddělit do samostatného souboru. Výhodou je, že můžeme vytvořit styly pro více stránek najednou.

HTML

<body>
  <button class="btn">Tlačítko</button>
</body>

Samotné styly pak můžeme vytvořit například v souboru style.css.

Máme element, který se může na stránce objevovat vícekrát? Super, vytvořímemu třídu. V našem případě btn.

Máme element, který bude na stránce vždy pouze jeden? V tom případě můžeme použít ID – to se hodí například pro hlavičku stránky.

CSS

.btn {
  transition: padding 0.3s ease;
  border-radius: 0.2em;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  /* a spoustu dalších stylů... */
}
.btn:hover {
  background-color: #3e8e41;
  padding: 15px 64px;
}

Zbývá už jen zodpovědět otázku za zlatého bludišťáka: "Jak vycentruji div"?

Existují dva moderní způsoby, jak se s tímto problémem vypořádat – Flexbox a Grid.

Flexbox je jednodušší a vhodnější pro jednoduché layouty, které se skládají z jednoho řádku nebo sloupce.
Grid je vhodnější pro komplexnější 2D layouty, které se skládají z více řádků a sloupců.

Level 1: CSS Reset

Pojďme ale k něčemu zajímavějšímu.

Všimli jste si, že některé stránky vypadají v různých prohlížečích jinak? To je způsobeno tím, že každý prohlížeč má své vlastní výchozí styly. Tyto styly se liší například v použitých fontech, velikosti písma, odsazení, atd. Abychom se tomuto problému vyhnuli, můžeme použít CSS reset.

Knihoven, které nám pomáhají s CSS resetem, je celá řada. Jednou z nich je například Meyer reset nebo Pure CSS.

V kódu pak stačí jen například přidat import do hlavičky stránky.

HTML

<head>
  ...
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/base-min.css">
</head>

Level 2: Preprocesory

Preprocesory jsou nástroje, které rozšiřují možnosti CSS. Výhodou je, že můžeme využívat proměnné, funkce a další vlastnosti, které v CSS nejsou dostupné. Mezi nejpoužívanejší preprocesory patří Sass, Less a Stylus.

V jednom souboru si například můžeme definovat barvy, které víme, že budeme využívat častěji v našem projektu.Soubor si pojmenuji např. colors.less.

LESS

@color-background: aliceblue;
@color-primary: #4CAF50;
@color-secondary: #FFC107;

A tyto barvy pak můžeme importovat do našeho hlavního souboru style.less.

@import "colors.less";

.btn {
  transition: padding 0.3s ease;
  border-radius: 0.2em;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

  &.btn-primary {
    background-color: @color-primary;
    &:hover {
      background-color: darken(@color-primary, 10%);
    }
  }
}

Level 3: Frameworky

Zde se již pomalu dostáváme do oblasti, kterou rád nazývám líní programátoři. Typické využití spočívá v tom, že již není třeba psát spousty CSS kódu, ale pouze přidáváme předpřipravené třídy k prvkům, které chceme stylovat. To může ušetřit čas, ale zároveň si tím již trochu řežeme větev, na které sedíme, protože se nám může stát, že některé prvky nebudeme schopni stylovat tak, jak bychom chtěli.

Mezi nejpoužívanější frameworky patří historicky nejoblíbenější Bootstrap a poměrně mladý a prosperující Tailwind CSS.

HTML

<body class="vh-100 vw-100">
  <div class="container h-100 pt-5 pb-3 bg-light">
    <div class="d-flex justify-content-around">
      <button class="btn btn-primary">Tlačítko A</button>
      <button class="btn btn-secondary">Tlačítko B</button>
    </div>
  </div>
</body>

Level 4: Knihovny komponent

A protože škála lenosti programátorů není shora omezená, existují i celé knihovny hotových komponent.

V tomto případě už jen využíváme hotové komponenty, které jsou navržené tak, aby byly snadno použitelné a konfigurovatelné. Knihovny komponent jsou ideální pro rychlý vývoj aplikací, kdy nemáme čas ani zdroje na to, abychom vytvářeli vše od základů. Tyto knihovny nabízejí širokou škálu komponent, od tlačítek až po složité formuláře a navigační prvky.

Mezi oblíbené knihovny patří Material-UI, která poskytuje komponenty ve stylu Google Material Design, a Ant Design, který je populární ve světě React aplikací.

Tyto knihovny většinou zahrnují nejen CSS, ale také JavaScript, který je potřeba pro jejich správné fungování. Většina frameworků má svoji rodinu komponent, takže je velká šance, že si mezi nimi vyberete tu pravou.

Závěrem

Možná už trochu tušíte, že neexistuje univerzální řešení. Můžeme kombinovat různé techniky podle potřeb našeho projektu. Nemusíme se omezovat pouze na jeden nástroj nebo framework a často se stává, že kombinace několika technik vede k nejlepším výsledkům. Například můžeme použít CSS reset pro zajištění konzistence napříč prohlížeči, zatímco preprocesory nám umožní efektivnější práci se styly. Pro rychlý vývoj můžeme využít frameworků, ale zároveň si vytvořit vlastní komponenty pro specifické potřeby.