Lekce 1.4

Tailwind CSS: utility-first přístup

Vzhled skládaný z hotových tříd přímo na prvku v HTML.

Cvičení 1

Sekce

Co si vyzkoušíte

Přestylujete úvodní sekci stránky výhradně utilitami a přepnete její rozvržení podle šířky okna. Tlačítku přidáte stav při najetí myší. Ve výchozím stavu máte v HTML nadpis, odstavec, tlačítko a obrázek bez jediné třídy a v hlavičce skript Play CDN.

Cílem jsou tyhle dvě podoby:

Vlevo sekce v úzkém okně: nadpis, text, tlačítko a pod nimi obrázek. Vpravo v širším okně: text s tlačítkem vlevo, obrázek vpravo a větší nadpis.

Zadání

  1. Omezte šířku sekce a vycentrujte ji na stránce.
  2. Dejte sekci vnitřní odsazení, které je na úzkém okně menší než na širokém.
  3. Uspořádejte obsah v úzkém okně pod sebe s rozumnou mezerou.
  4. Od šířky md dejte text a obrázek vedle sebe do dvou sloupců.
  5. Od šířky md zvětšete písmo nadpisu.
  6. Dejte tlačítku při najetí myší tmavší odstín pozadí.
  7. Zapněte ve vývojářských nástrojích simulaci mobilního zařízení, měňte šířku okna a ověřte, že se rozvržení sekce správně přepne.

Bonus

  1. Přidejte tlačítku a obrázku jemný stín a při najetí myší ho zvětšete.
  2. Vyzkoušejte si šířky sm a lg a rozhodněte, jestli sekce potřebuje tři podoby, nebo jí stačí dvě. Jak by se podoba pro ještě větší šířku okna lišila?
  3. Zduplikujte si sekci v HTML a vymyslete, jak zařídit, aby druhá sekce měla v širokém okně obráceně obrázek vlevo a text vpravo, aniž byste měnili jejich pořadí prvků v HTML. Můžete pouze přidávat Tailwind třídy.