Responzivita: stylistické úpravy

html-a-css/bem-a-responzivni-design/how-to-responsive.md

@@ -31,13 +31,13 @@ V této lekci si projdeme flexibilní layout.
 
 ### Flexibilní layout
 
-Pro tvorbu flexibilního layoutu pomáhá designérům rozvržení stránky do gridu, neboli mřížky. Jde o systém sloupců a řádků, kde elementy zabírají vždy nějaký poměr stránky nehledě na velikost zařízení. Při změně velikosti zařízení si prvky na stránce drží svůj poměr, nebo se zalomí pod sebe, pokud už je prostor nedostačující. Oproti neresponzivním webům tak třeba několikaslopcový grid nepřeteče mimo viewport menšího zařízení, ale sloupce se zalomí pod sebe. 
+Pro tvorbu flexibilního layoutu pomáhá designérům rozvržení stránky do gridu, neboli mřížky. Jde o systém sloupců a řádků, kde elementy zabírají vždy nějaký poměr stránky nehledě na velikost zařízení. Při změně velikosti zařízení si prvky na stránce drží svůj poměr, nebo se zalomí pod sebe, pokud už je prostor nedostačující. Oproti neresponzivním webům tak třeba několikaslopcový grid nepřeteče mimo viewport menšího zařízení, ale zmenší se počet sloupců.
 
 ::fig[grid-responzivni]{src=assets/grid-gif.gif}
 
 #### Relativní jednotky
 
-Pružného layoutu, který se přizpůsobí jakékoli velikosti stránek, dosáhneme pomocí relativních jednotek jako jsou procenta, `vw` a `vh`. Díky nim budou elementy na stránce zabírat stejný poměr prostoru nehledě na velikost zařízení. Mřížku např. tří sloupců si tak jednoduše vytvoříme pomocí procent a funkce `calc()`. 
+Pružného layoutu, který se přizpůsobí jakékoli velikosti stránek, dosáhneme pomocí relativních jednotek jako jsou procenta, `vw` a `vh`. Díky nim budou elementy na stránce zabírat stejný poměr prostoru nehledě na velikost zařízení. Mřížku např. tří sloupců, které budou na všech zařízeních zabírat 1/3 stránky, tak jednoduše vytvoříme pomocí procent a funkce `calc()`. 
 
 ```
 width: calc(100% / 3);
@@ -53,3 +53,6 @@ Další nástroj pro tvorbu responzivního layoutu už znáte - je to flexbox. S
   flex-wrap: wrap;
 }
 ```
+
+#### CSS Grid
+Poslední nástroj, který musíme zmínit, ale který není součástí našeho kurzu je CSS Grid. V rámci samostudia si můžete pročíst, [jak se pomocí něj nastavují řádky a sloupce layoutu](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).

html-a-css/bem-a-responzivni-design/mobile-first.md

@@ -5,8 +5,8 @@ Správný postup, jak navrhovat a kódovat responzivní webové stránky je zač
 ### Nějaká ta čísla
 
 ::fig[Mobile traffic 2012-2023]{src=assets/Mobile-Traffic-2012-2023.png}
+
 [Zdroj obrázku](https://www.oberlo.com/statistics/mobile-internet-traffic)
-<br/>
 
 - 60 % návštěv webů pochází z mobilních zařízení
 - 61 % uživatelů se na stránku už nevrátí, pokud neměli dobrou zkušenost na telefonu
@@ -20,9 +20,8 @@ Správný postup, jak navrhovat a kódovat responzivní webové stránky je zač
 Prostor na telefonu je omezený a náročný na design. Je lepší tedy začít tím těžším, vymezit si ty nejdůležitější informace a akce. Poté už bude snadnější přidávat další věci pro větší zařízení. Jde o dobrou praxi, protože se zaměřujeme primárně na obsah a dobrou použitelnost. Animace a sekundární obsah řešíme až v druhém kroku.
 
 ::fig[Display comparison czechitas mapy cz]{src=assets/mobile-first-czechitas.png}
-<br/>
+
 ::fig[Display comparison skyscanner]{src=assets/responsive-skyscanner.png}
-<br/>
 
 ### Jak postupovat při designu pro mobilní zařízení? 
 

html-a-css/bem-a-responzivni-design/responsivity-history.md

@@ -9,7 +9,7 @@ Typicky se dělí velikosti obrazovek na tři skupiny: mobil, tablet a desktop.
  Pokud má být stránka plně responzivní, měla by být použitelná a uživatelsky přívětivá ve všech rozlišeních uvnitř těchto rozmezí. Pro představu, kolik  rozlišení může být a která jsou nejčastější slouží statistika na stránce [statcounter](https://gs.statcounter.com/screen-resolution-stats#monthly-202301-202309-bar).
 
 #### Hardwarové pixely versus CSS pixely
-Je dobré mít na paměti, že když hovoříme o rozlišení a pixelech, nemluvíme o těch hardwarových, ale o referenční jednotce CSS pixelů. U zařízení s displeji s vysokým rozlišením (např. retina displej u Apple zařízení) může být jejich hardwarové rozlišení třeba 2x nebo i 4x větší. Nás vývojáře ale zajímá velikost v CSS pixelech, která odpovídá velikosti viewportu na daném zařízení. Nicméně je dobré mít na paměti, že tyto hodnoty nejsou 1:1 např. při používání bitmapových obrázků, jejichž kvalita se bude napříč zařízeními lišit. O tvorbě responzivních obrázků budeme mluvit v přístí lekci. 
+Je dobré mít na paměti, že když hovoříme o rozlišení a pixelech, nemluvíme o těch hardwarových, ale o referenční jednotce CSS pixelů. U zařízení s displeji s vysokým rozlišením (např. retina displej u Apple zařízení) může být jejich hardwarové rozlišení třeba 2x nebo i 4x větší. Nás vývojáře ale zajímá velikost v CSS pixelech, která odpovídá velikosti viewportu na daném zařízení. Nicméně je dobré mít na paměti, že tyto hodnoty nejsou 1:1, až budeme řešit tvorbu responzivních obrázků. 
 
 ### Cíl responzivního webdesignu
 
@@ -20,7 +20,7 @@ Cílem responzivního webdesignu je **zajistit optimální uživatelskou zkušen
 - na všechno jde pohodlně „kliknout“, např. tlačítka jsou dostatečně velké na palec 
 - nikde není obsah přes sebe nebo není něco schované „za rohem“
 - na mobilu např. nevyžadujeme stisknutí klávesy na klávesnici 
-- nespoléháme na stav `hover` např. pro otevírání menu - na mobilu neexistuje
+- nespoléháme na stav `hover` - na mobilu neexistuje
 
 #### Přizpůsobený obsah