Lekce 1.6

Workshop: přepracování stránky

Responzivní stránka cukrárny od mobilu po desktop, mini-review ve dvojicích podle checklistu a ukázky nejzajímavějších řešení.

Zadání a definice hotovo

Dnešek je jiný než předchozí bloky: skoro celý čas se pracuje. Výklad se scvrkl na zadání, na kritéria a na to, jak se dělá zpětná vazba – zbytek je na vás a na konzultacích.

Úkolem je dokončit stránku cukrárny Sladká chvilka tak, aby fungovala od telefonu po velký monitor. Na stránce je hlavička s logem a menu, hero s nadpisem a fotkou dortu, čtyři kartičky zákusků a patička se čtyřmi sekcemi.

Tři podoby téže stránky vedle sebe. Na mobilu je všechno pod sebou a kartičky mají obrázek nahoře. Na tabletu je obsah široký nejvýš 700 pixelů, menu zůstává pod logem, kartičky jsou pod sebou na šířku s obrázkem vlevo a patička má dva sloupce. Na desktopu je obsah široký nejvýš 1200 pixelů, logo a menu stojí v jednom řádku, hero má text vlevo a obrázek vpravo, čtyři kartičky jsou v řadě a patička má čtyři sloupce.

Co je připravené

HTML je hotové celé, včetně tříd, a sahat do něj nebudete. Ve stylopisu je nastavený základní vzhled pro mobil: písma, barvy, tlačítko, hlavička, hero i patička. Chybí jen vzhled kartiček zákusků.

Barvy, rozestupy a zakulacení rohů čekají v proměnných na začátku style.css. Na konci souboru jsou dvě prázdné media query, jedna pro tablet a jedna pro desktop:

style.css
/* TABLET */
@media (min-width: 660px) {

}

/* DESKTOP */
@media (min-width: 1100px) {

}

Takhle se stylopis staví postupem zvaným mobile first. Všechno mimo media query platí pro mobil a zároveň je to základ pro větší šířky. Media query pro tablet přidává jen to, co se od 660 pixelů mění, a media query pro desktop jen to, co se mění od 1100 pixelů. Co na mobilu funguje i na desktopu, se nepíše dvakrát.

Jak má výsledek vypadat, ukazují snímky vysledek-mobil.png, vysledek-tablet.png a vysledek-desktop.png ve složce projektu.

Co znamená hotovo

Kritéria jsou známá dopředu a jsou stejná pro všechny. Podle nich se za chvíli bude dělat i vzájemné review:

  • Stránka odpovídá snímkům v šířce mobilu, tabletu i desktopu.
  • Základní styly platí pro mobil. Media query obsahují jen to, co se v dané šířce mění.
  • Hranice jsou jen dvě, 660px a 1100px, a obě sedí v připravených media query.
  • Stránka funguje od 320 pixelů výš a nic nepřetéká ani v šířkách mezi hranicemi.
  • Hodnoty se berou z proměnných. Kde pro barvu nebo rozestup existuje proměnná, nezůstala v pravidle hodnota napsaná natvrdo.
  • HTML zůstalo beze změny. Všechno se řeší ve stylopisu.
  • Kód se dá přečíst. Žádné zbytečně dlouhé selektory a žádný !important.

Jestli kartičky postavíte Flexboxem, nebo mřížkou, je na vás. Nejde o to, čím je stránka napsaná, ale jestli splňuje kritéria.

Tři milníky

Tři milníky za sebou, každý je jedno cvičení. První jsou kartičky, které se píšou mimo media query: mezery, pozadí a rohy, barevné stíny, obrázek a texty. Druhý je tablet v media query od 660 pixelů: obsah nejvýš 700 pixelů, kartičky na šířku a patička ve dvou sloupcích. Třetí je desktop v media query od 1100 pixelů: obsah nejvýš 1200 pixelů, logo s menu a hero vedle sebe, čtyři kartičky a čtyři sloupce patičky.

Každý milník je jedno cvičení a jdou ve stejném pořadí jako stylopis: od mobilu přes tablet k desktopu. Nejčastější chyba je začít od desktopu, protože na velkém monitoru se pracuje nejpohodlněji – a pak mobil dohánět přepisováním všeho, co se nevejde.

Tip

Šířku okna nastavujte přesně, ne od oka. Ve vývojářských nástrojích zapněte panel s velikostí zařízení (Device toolbar), na Windows a Linuxu zkratkou Ctrl+Shift+M, na Macu Cmd+Shift+M. Šířku pak zapíšete číslem a hranice 660 a 1100 trefíte na pixel – i pixel pod nimi.