Dokumentace · API · Data · Design · Editor · Nápověda · Infrastruktura

Moduly

Hlavní části DIV.cz mají vlastní identifikační barvu. Barva pomáhá poznat, ve které části systému se uživatel nachází, ale nesmí měnit základní strukturu komponent – mění identitu, ne anatomii.

Barvy

Barva Použití HEX
DIV červená Filmy #E31E24
DIV tmavě červená Filmy – tmavá varianta #A52B21
DIV oranžová Seriály #F28C00
DIV tmavě oranžová Seriály – tmavá varianta #C56B00
DIV zelená Knihy #80AE2E
DIV tmavě zelená Knihy – tmavá varianta #618728
DIV modrá Hry #00A0E3
DIV tmavě modrá Hry – tmavá varianta #0A76A9
DIV šedá Obecné texty a neutrální části #727271

CSS proměnné

Globální proměnné jsou definované jednou v general.css:

:root {
    --div-movies: #E31E24;
    --div-movies-dark: #A52B21;

    --div-series: #F28C00;
    --div-series-dark: #C56B00;

    --div-books: #80AE2E;
    --div-books-dark: #618728;

    --div-games: #00A0E3;
    --div-games-dark: #0A76A9;

    --div-neutral: #727271;
}

Modulová identita v components.css je z nich odvozená:

.module-movies {
    --module-color: var(--div-movies);
    --module-color-dark: var(--div-movies-dark);
}

.module-books {
    --module-color: var(--div-books);
    --module-color-dark: var(--div-books-dark);
}

Komponenta pak barvu čte přes var(--module-color, ...) a nikdy si ji nezapisuje napevno: 

.content-card-main {
    border-top: 3px solid var(--module-color, var(--div-neutral));
}

Kde se barva používá

Hlavní modulová barva:

  • aktivní stav,
  • identifikační linka (např. horní okraj karty),
  • badge,
  • drobné zvýraznění,
  • vybrané CTA.

Tmavá varianta:

  • hover,
  • active,
  • kontrastní stav.

Tmavá varianta není libovolná náhradní barva – používá se jen tam, kde má skutečně funkci hoveru nebo aktivního stavu, ne jako druhá barva na ozvláštnění.

Použití v HTML

Modul se přidává jako doplňková třída ke komponentě, ne jako samostatná varianta:

Takto

<div class="content-card-main module-books">

Ne takto

<div class="book-card-main">

…pokud knižní karta nemá skutečně odlišnou funkční strukturu od filmové. Pokud by ji měla, nejde o modulovou variantu, ale o novou komponentu – a patří do Komponent.