Pár slov…
Tento CSS layout či framework nebo možná už design systém, vznikl jako experiment se zarovnáním prvků stránky na vertikální mřížku. Tato mřížka se nastavuje jako proměnná v CSS, výchozí hodnota je 24px. Mřížku lze díky jednoduchému javascriptu skrýt nebo zobrazit – slouží to zejména k dodatečné kontrole zarovnání.
Zarovnání textu na mřížku v html + CSS je trochu ošidné,
protože nelze jednoduše určit, kde přesně je
baseline fontu (každý font to má trochu jinak),
takže jsem neřešil baseline, ale vycházel jsem z toho,
jak html stránka pracuje s umístěním textu. Jsou zde dva
základní parametry – výška řádku
line-height a výška fontu
font-size. Text je umístěn na střed výšky
řádku, a zbylý prostor se rovnoměrně rozdělí nad a pod
text. V našem případě to znamená, že nad textem i pod
textem jsou 4px.
Layout
Framework používá poměrně jednoduchý layout. Ideální je
rozdělit stránku na sémantické celky pomocí
<header>, <main> a
<footer> a do těchto oddílů vždy nejdříve
vložit div s třícou .container – ten zařídí, že
je obsah vycentrovaný, že má základní padding od levého a
pravého okraje a že se od šířky mega už dále
nezvětšuje.
Tento postup byl zvolen pro případy, kdy je potřeba stylovat
prvky na celou šířku stránky. Pro horní a dolní odsazení
doporučuju ještě ke kontejneru přidat třídu
.pt pro horní a .pb pro dolní
padding.
Breakpointy
fromtablet
fromtablet todesktop
todesktop
Pro zobrazení prvku na určitém vewortu využíváme třídy
začínající .to nebo .from:
| Viewport | .tomobile | .totablet | .todesktop | .towidescreen | .tofullhd |
|---|---|---|---|---|---|
| mobil (do 575 px) | ANO | ANO | ANO | ANO | ANO |
| tablet (od 576 px do 767 px) | ANO | ANO | ANO | ANO | |
| desktop (od 768 px do 1023 px) | ANO | ANO | ANO | ||
| widescreen (od 1024 px do 1279 px) | ANO | ANO | |||
| fullhd (od 1280 px do 1535 px) | ANO | ||||
| mega (od 1536 px dále) |
| Viewport | .fromtablet | .fromdesktop | .fromwidescreen | .fromfullhd | .frommega |
|---|---|---|---|---|---|
| mobil (do 575 px) | |||||
| tablet (od 576 px do 767 px) | ANO | ||||
| desktop (od 768 px do 1023 px) | ANO | ANO | |||
| widescreen (od 1024 px do 1279 px) | ANO | ANO | ANO | ||
| fullhd (od 1280 px do 1535 px) | ANO | ANO | ANO | ANO | |
| mega (od 1536 px dále) | ANO | ANO | ANO | ANO | ANO |
Pro úpravu zobrazení používáme několik druhů tříd.
Nejjednodušší jsou třídy typu .desktop-yes –
daný element zobrazí pouze pro viewport desktop a nižší.
Dále používáme třídy typu .todesktop – zobrazí
se od mobilu po desktop (včetně).
Elementy
Elementy jsou základní stavební prvky stránky, které stylujeme. Framework je nastaven tak, že v základu není potřeba používat žádné třídy – úpravy se aplikují na čisté html. To se hodí například pro stylování textu převedeného z markdownu.
Nadpisy
Lze používat běžné nádpisy h1 až
h4, případně lze aplikovat třídy
.size1 až .size4 na libovlný
text. Velikosti nadpisů se řídí násobky 1,5.
| nadpis | třída | velikost |
|---|---|---|
| h1 | .size1 | 2,25 × 1,5 = 3,375 rem |
| h2 | .size2 | 1,5 × 1,5 = 2,25 rem |
| h3 | .size3 | 1 × 1,5 = 1,5 rem |
| h4 | .size4 | 1 rem |
Pokud chceš nadpis s podnadpisem, obal
h1 a h2 do tagu
<hgroup>.
Odstavce
Odstavec není třeba stylovat žádnou třídou, je rovnou
zarovnaný na grid a má spodní margin ve výšce jednoho
řádku. Přidáním třídy
.readable se omezí maximální délka odstavce
na 75 znaků. (Z různých UX studií vyplývá, že právě
délka mezi 50-75 znaky je pro čtení optimální.)
Textové elementy
-
<p>odstavce mají správné řádkování a spodní odsazení -
<ul><ol><dl>seznamy mají správné zarovnání a řádkování -
<h1>až<h6>nadpisy mají nastavené velikosti a jsou usazeny na baseline grid -
<blockquote>citace jsou správně zarovnané -
<em>a<strong>se chovají tak, jak mají -
<table><tr><th><td>tabulky mají přehlednější uspořádání
Můžeš použít mark pro
zvýraznení textu.
Tento řádek je smazaný pomocí tagu del.
Tento je přeškrtnutý díky tagu S. Můžeš použít i
.strike
Tohle je vložení pomocí tagu ins.
Tohle je podtržený text díky tagu U.
Tohle je malý text pomocí tagu small.
Můžeš použít i .small
Tohle je tučný text. Můžeš použít i
.bold.
Toto je kurzíva. Můžeš použít i
.italic.
Takto označíme inline kód pomocí
<code>.
A tady jsou klávesy kbd – stiskni ⌘ +
Ctrl a kopíruj.
Text obsahuje zkratku
CSS.
Barvy textu
Framework má definované některé základní barvy, jsou to
třeba .grey, .red nebo
.blue. Pro změnu pozadí se používá prefix
bg, takže např. .bg-grey. V
rámci CSS proměnných je definovaná primary barva,
která se používá u tlačítek. Každá základní marva má
navíc světlou a tmavou variantu.
modrá, zelená, červená, šedá, oranžová, žlutá
Dělící linka
Dělící linka <hr> je pravená tak, že
kopíruje linku gridu a má spodní margin vysoký 1 řádek.
Můžeš ji použít pro optické oddělení textových bloků.
Je tady dále třída .divider, která umožňuje
vytvořit linku s textem.
Seznamy
Dále jsou zde správně zarovnané číslované i nečíslované seznamy.
-
jedna
- jedna a půl
- dva
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In convallis. Quisque tincidunt scelerisque libero.
- jedna
- dva
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In convallis. Quisque tincidunt scelerisque libero.
Pomocí třídy .inline lze seznam zobrazit
jako řádkový:
- jedna
- dva
- tři
Citace
Citace se řeší klasicky tagem
<blockquote>, autora lze uvést do
vnořeného tagu <footer>.
Další příklad blockquote s delším textem, abychom viděli, jak se chová margin a padding.
Callout
Zvýrazněný kus textu – jednoduchý rámeček s okrajem,
který lze aplikovat třídou
.callout na libovolný div nebo
odstavec p.
Jsem callout.
Callout může mít bílé pozadí pomocí třídy
.bg-white.
Jsem bílý
Callout může mít stín pomocí třídy
.shadow. A samozřejmě je možné třídy
kombinovat.
Mám stín, jsem bílý a mám border.
Je zde i varianta méně robustního stínu
.shadow-light
Lehký stín
Tlačítko
Tlačítka mají defaultně 100% šířku.
Máme dva typy tlačítek – primární a sekundární. Z hlediska UX platí, že je vhodné mít vždy jen jedno primární tlačítko na stránce.
K označení primárního tlačítka stačí použít třídu
.primary.
Pro čtvercová tlačítka používáme třídu
.square. Používají se zejména v kombinaci s
ikonkou. Nezapomeň ji dát třídu .icon.
Dále máme dva doplňkové druhy tlačítek,
.pseudo, které nevypadá jako tlačítko a
.ghost, což je nenápadné tlačítko bez
okraje.
Coby malá pocta neobrutalismu je tady možnost zvýraznění
přes třídu highlight. Případně je možné
udělat kombinaci tříd .highlight a
.secondary a podbarvení bude šedé.
Barvy tlačítek
Tabulky
Tabulky jsou zarovnané na grid.
| Sloupec 1 | Sloupec 2 | Sloupec 3 |
|---|---|---|
| Řádek 1, Sloupec 1 | Řádek 1, Sloupec 2 | Řádek 1, Sloupec 3 |
| Řádek 2, Sloupec 1 | Řádek 2, Sloupec 2 | Řádek 2, Sloupec 3 |
| Řádek 3, Sloupec 1 | Řádek 3, Sloupec 2 | Řádek 3, Sloupec 3 |
| Řádek 4, Sloupec 1 | Řádek 4, Sloupec 2 | Řádek 4, Sloupec 3 |
| Řádek 5, Sloupec 1 | Řádek 5, Sloupec 2 | Řádek 5, Sloupec 3 |
Ikony
Ikony jsou pain. Doporučuju naládovat SVG přímo do textu
a použít třídu .icon. Doporučuju použít
Heroicons.
Připraveni jsme i na použítí
Font Awesome.
Postup je klasický – tedy jeden span s třídou
.icon a vnořený span s třídou řezu a
konkrétní ikonky.
Velkou ikonu lze udělat přidáním třídy
.big – bude vysoká přes dva řádky.
Obrázky
Obrázky na gridu jsou problematické – jakmile se mění šířka viewportu, obrázek mění výšku a tím pádem nezapadá do gridu. Proto jsou dvě možnosti:
- Neřešit to – prostě vložit obrázek a nechat ho posunout řádkování.
- Použít obrázek s přesnou velikostí.
Pro čtvercové obrázky jsou tady třídy
.onebox, .twobox,
.threebox a .fourbox – tyto
nastavují přesnou šířku a výšku na daný počet řádků.
Pokud obrázek nechceš čtvercový, jsou tady podobné třídy
pouze pro výšku: .oneline,
.twolines, .threelines a
.fourlines.
Můžeš použít tag <figure> a
<figcaption>.
A je tady jedna vychytávka – hezký rámeček, stačí přidat
class .frame.
Progress bar
Používá nativní <progress>.
Štítek
Toto je základní
štítek, stačí text obalit do
spanu a přidat třídu .tag. Pokud je třída
na odkazu, objeví se
podtržení. K mání jsou i barvy .white,
.red, .blue,
.green, .orange nebo
.yellow.
bílý modrý červený žlutý oranžový zelený s odkazem
Štítek má dvě velikosti, ta menší funguje pěkně v rámci
textu (inline), ta druhá, která se vytvoří třídou
.big je v případě víceřádkového použití
potřeba odsadit spodním marginem .mb.
bílý modrý červený žlutý oranžový zelený s odkazem
Indikátor
Štítek lze použít také jako "indikátor" – umísti jej do
tlačítka (je potřeba tlačítku nastavit třídu
.relative kvli správnému pozicování
indikátoru) a přidej štítku třídu .badge.
Sloupce
Pro práci se sloupci používáme kontejner
.row, do nějž můžeme vložit libovolné množství
kontejnerů .item. Každý sloupec zabírá stejný
podíl místa, gap je defaultně nastaven na baseline,
vertikální zarovnání je uprostřed. Pokud potřebujeme
zarovnat nahoru, stačí k .row přidat třídu
.top.
Pomoci tříd .mobile, případně
.tablet či .desktop nastavíme, od
jakého breakpointu se prvky řadí pod sebe.
Pokud se řádku nastaví .all-2, fixne se na dvou
položkách na řádek (pokud je jich více, zalomí se). Podobně
lze nastavit i .all-1 pro situace, kdy přes
flexbox např. něco pozicujeme na střed a chceme jen jednu
položku v řádku.
Pokud mají být všechny prvky rovnoměrně roztažené, je třeba
dát kontejneru třídu .full. Pokud má být
roztažený pouze jeden sloupec a ostatní mají být smrsknuté,
stačí jej označit třídou .wide. To je velice
šikovné různých řádkových layoutů.
K dispozici jsou také třídy pro vertikální zarovnání prvků,
konkrétně .middle, .top,
.bottom a .stretch.
Pokud potřebujeme jiný gap, jsou tady třídy
.compact s polovičními mezerami a
.gapless úplně bez mezer.
Ukázka použití v praxi:
Layout
Tento prvek se hodí např. pro produktové výpisy, je navázán
na
.row – stačí mu přidat třídu
.layout a začne se chovat tak, že zobrazuje pro
různé šířky viewportu různý počet prvků na řádek.
Výchozí počet jsou dva prvky, na tabletu a desktopu jsou 3, na widescreenu a fullhd 4 a na maximální šířce je to 6.
Okraje
Odstavce, buttony nebo třeba callout mají defaultně nastavený spodní margin na velikost baseline – to kvůli formátování plain html.
Je možné růčo měnit jak margin, tak padding a to ve čtyřech
stupních – nula, half, standard a big. Např takto:
.m-0, .m-half, m,
m-big (pro padding se používá prefix p).
Fungují i dílčí třídy jako ml-0 nebo
px-half.
Komponenty
Toto už jsou nějaké složitější udělátka, nad rámec základních elementů. Většinou se skládají z několika prvků.
Notifikace #
Jako notifikaci můžeš použít
.callout. Přidáním třídy
.dismissable a vložením tlačítka s třídou
.close lze zprovoznit zavírání křížkem.
Akordeon
Používáme section .accordion, do ní jsou
vnořené divy obsahující button a div s ID označující
unikátní sekci. Otevírání zajišťuje javascript.
An accordion is a UI component that allows users to expand and itemlapse sections of content.
By using semantic HTML, ARIA attributes, and ensuring keyboard accessibility.
Accessibility ensures that your content is usable by everyone, including people with disabilities.
Umíme to i s nativním elementem
details – není potřeba dodávat žádnou
třídu, stačí použít standardní zápis a rozbalenou
část zabalit do divu.
Je tohle dobré?
Je tohle dobré dva?
Breadcrumb
Breadcrumb tvoříme jako číslovaný
<ol> seznam, který má díky třídě
.breadcrumb na obalovém
<nav> kontejneru řádkové zobrazení.
Tabs
Toto jsou základní "ouška". je to jednoduchý
ul seznam s třídou .tabs.
Pomocí třídy .boxed se docílí zobrazení s
oušky.
Testovací odstavec
Formuláře
Modal
Modální okno používá špetku javascriptu. Hlavní div má
třídu
.modal a nějaké id, které voláme na
spouštěcím odkazu. Do něj je vnořen div
.modal-content. Záhlaví modalu je div
(sémanticky správně používám header) s
třídou .row obsahující dva prvky – nadpis a
zavírací tlačítko. Pak následuje div (sémanticky správně
section) s třídou
.modal-body a to je veskrze vše.
Pokud chci modal přes celou obrazovku, přidám ke třídě
.modal třídu .fullscreen.
Pokud chci záhlaví vždy viditelné, stačí do header
přidat třídu .sticky a
.bg-white.
Modal se spouští odkazem nebo tlačítkem s třídou
.open-modal a data-modal s hodnotou id
patřičného modalu.
Dropdown
Celý dropdown se obalí divem s třídou
.dropdown, spouštěcí button má třídu
.dropdown-toggle, po něm následuje ul
seznam s třídou .dropdown-menu. Odsazení
dropdownu od buttonu je dáno spodním marginem buttonu,
ideální je nastavit .mb-half. Aktivní
položku lze zvýraznit třídou .active.
Mega menu
Mega menu je CSS only, je založeno na třídě
.menu, která se aplikuje na
nav kontejner, uvnitř je klasický ul
seznam, můžeme mu dát třeba třídu .tabs.
Položky tohoto seznamu jsou označené třídou
.mega-menu-item a pokud má být menu
rozbalovací, musí položka obsahuvat div kontejner s
třídou .mega-menu – uvnitř může být
libovolný obsah, který se objeví po najetí kurzorem na
odkaz.
U tohoto menu používáme
transition-delay 0.1 s – to proto, aby se
menu nezobrazovalo při náhodném přejetí odkazu kurzorem.
Hover menu
Hover menu je komponenta, která zobrazí div po najetí
myší na odkaz, je to vlastně mix mezi dropdownem a mega
menu. Je to užitečné na případy jako hover košík.
Spouštěcí tlačítko nebo odkaz obal třídou
.hover-toggle a uvnitř této třídy vlož DIV
s třídou hover-menu – v tomto divu je pak
samotný obsah menu.
Sidebar
Jednoduchý seznam se zvýrazněním při najetí myší, stačí
ul seznamu dát třídu
.sidebar
Přidáním třídy .list k sidebaru se změní
stylování:
Carousel
Základem je .carousel-container, do něj se
vloží samotný .carousel a
.carousel-button s třídou
.prev nebo .next. Uvnitř
carouselu je pak klasický .row +
.item.
Přidáním třídy .lightbox se zobrazuje pouze
jedna listovací položka.
Pískoviště
Buy box
Mobilní záhlaví
Tři verze mobilního záhlaví – v závislosti na velikosti mezer.
imago
imago
imago