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

CSS

Nové a přepracované stránky používají jednu složku /web/css/v2/. Staré soubory (movies.css, navbar.css, …) mohou během migrace zůstat, ale nová stránka je nepoužívá jako opravnou berličku.

Struktura souborů

/web/css/v2/
    general.css        obecný text, tabulky, formulářové prvky
    layout.css          kontejner, sloupcová rozložení
    navigation.css       breadcrumb, sekční nav, levé menu, hledání
    components.css      karta, řádek, seznam, tlačítko, badge, …
    responsive.css       pravidla nevázaná na jednu komponentu

    module_docs.css     kostra dokumentace, odsazení článku
    module_movies.css
    module_books.css
    module_games.css

Nevytváříme další vnořenou složku modules/ – prefix module_ jednoznačně odlišuje modulové CSS od globálních vrstev.

Pořadí načítání

Pořadí je závazné, protože modulový soubor smí přebít jen skutečné odlišnosti, ne celý layout:

<link href="/web/css/v2/general.css" rel="stylesheet">
<link href="/web/css/v2/layout.css" rel="stylesheet">
<link href="/web/css/v2/navigation.css" rel="stylesheet">
<link href="/web/css/v2/components.css" rel="stylesheet">
<link href="/web/css/v2/responsive.css" rel="stylesheet">
<link href="/web/css/v2/module_docs.css" rel="stylesheet">

Tahle stránka dědí z docs/docs_base_public.html, ne z docs/_base.html – dokumentace zatím zůstává na starém základu (navbar.css, navbar_together.css, docs.css) a načítá si k němu jen web/css/v2/components.css pro karty, tlačítka, badge a další ukázky na téhle stránce. Kompletní pořadí výše platí pro nové moduly, které staví na docs/_base.html / _layout/base.html.

Pojmenování tříd

Názvy CSS tříd jsou anglicky, popisné a hierarchické – nejméně tři významové části: modul – komponenta – prvek.

Takto

content-card-main
content-card-title
docs-nav-main
sidebar-list
movie-detail-head
book-detail-info

Ne takto

box
wrapper
menu2
content
left
right
card-new

Obecné názvy (content-*, action-*, form-*) jsou povolené jen u skutečně globálních abstrakcí, jako je karta, tlačítko nebo formulářové pole – prvků, které patří všem modulům stejně.

Inline CSS

Inline CSS nepoužíváme pro layout ani standardní komponenty.

Ne takto

<div style="width:100%; margin-left:20px;">

Takto

<div class="left-side">

Výjimkou jsou skutečně datové vizuální hodnoty – například barva ve vzorníku na stránce Moduly, kde style="background:#E31E24;" přímo reprezentuje zobrazovanou hodnotu, ne rozhodnutí o layoutu.

Co nepřidáváme

Novou CSS třídu nepřidáváme, pokud:

  • existující komponenta řeší stejný problém,
  • rozdíl je pouze barva,
  • rozdíl je pouze obsah,
  • rozdíl lze vyřešit modulovou identitou (.module-*).

Pokud nová stránka potřebuje vlastní řešení něčeho, co na DIV.cz už existuje, nejprve ověříme, jestli problém neřeší společný design systém. Pokud společné pravidlo nevyhovuje více stránkám, upraví se společné pravidlo – nevzniká další lokální oprava jen kvůli jedné stránce.