Nedávno vyšla nová kniha CSS Moderní Layout od Martina Michálka, která vám ukáže, jak v dnešní době správně dělat rozvržení webu v CSS. Obsahuje teorii, příklady a referenční příručku zároveň.

Trocha historie

Před dávnými lety se layout na webu dělal pomocí tabulek. Pak přišlo CSS a tabulky byly najednou „fuj“. Ale CSS žádnou skutečnou alternativu k tabulkám nenabízelo. Web jste pak měli plný různých CSS hacků, aby to vůbec nějak fungovalo. V dnešním CSS máme naštěstí hned několik modulů, které layout řeší, a kterým Martin souhrnně říká moderní metody CSS layoutu a o nich je právě jeho kniha.

Formát a struktura knihy

Kniha Martina Michálka CSS Moderní Layout je k dispozici buď v tištěné verzi (440 stránek) nebo jako e-book (EPUB, MOBI, PDF). Zakoupit ji můžete na stránce CSS: moderní layout, kde si rovněž můžete stáhnout 36 stránkovou ukázkovou kapitolu.

Kniha je rozdělena do 9 kapitol. Na konci každé kapitoly je shrnutí a jednoduchý kvíz, který otestuje, jak jste problematiku pochopili. V knize najdete mnoho příkladů a u většiny je odkaz na CodePen, kde si můžete příklad hned vyzkoušet. Autor doporučuje, abyste si na CodePen založili účet a jeho příklady si „forkli“.

Obsah knihy

1. Začínáme s layouty v CSS

V první kapitole se dozvíte, že v CSS jsou 3 základní moduly pro práci s layoutem: Flexbox, Grid a Multicol. Ty jsou dále doplněné čtvrtým modulem Box Align. Seznámíte se s tím, na co se který hodí a jak je kombinovat. Dále se proberete stručnou historií vývoje layoutu webových stránek.

2. Media Queries

Samostatná kapitola je věnována Media Queries, což je dnes základní stavební kámen responsivního designu. Jsou to podmínky, které nám umožní layout upravovat pro různě velké obrazovky. Zároveň se seznámíte s jejich limity.

Podkapitolou jsou potom Container queries, které dělají podobnou věc jako Media Queries, ale pouze pro konkrétní komponentu. Container queries jsou ale v době vydání knihy zatím spíš technologie budoucnosti, protože je zatím nepodporuje žádný prohlížeč. Dále jsou zmíněné tzv. No Queries layouty, které zalamují rozvržení úplně bez podmínek.

3. Příklady užití

Třetí kapitola obsahuje několik příkladů vytažených z praxe. Jsou to například boční panel, responzivní fotogalerie, vyhledávací formulář, centrování boxu, galerie bez Media queries, mřížka jako v Bootstrapu apod.

4. Flexbox, 5. Grid, 6. Vícesloupcový layout, 7. Zarovnání boxů

Následují 4 kapitoly, které tvoří podstatnou část knihy, a jsou takovou referenční příručkou nebo „tahákem“ pro základní moduly CSS layoutu (Flexbox, Grid, Multi-column Layout a Box Alignment).

8. Co byste ještě měli vědět?

Tato kapitola pojednává o dalších souvisejících věcech jako je podpora v prohlížečích, přístupnost, rychlost a vývojářské nástroje v prohlížečích. Dozvíte se, jak je to momentálně s Internet Explorerem, jaká je podpora CSS layoutů v jednotlivých prohlížečích, jak pořadí prvků v kódu ovlivní přístupnost, jak složitá rozvržení ovlivní rychlost apod.

9. Související nástroje a vlastnosti

Závěrečná kapitola typu Co se jinam nevešlo. Jde opět o referenční příručku. Popisuje detailně například vlastnost display. Dále se věnuje logickým vlastnostem nezávislým na směru sazby, které jsou v moderních prohlížečích plně podporovány. Uděláte si pořádek v CSS jednotkách a zjistíte, jak je to vlastně s CSS proměnnými.

Údaje o knize

• Název: CSS Moderní Layout
• Autor: Martin Michálek
• Počet stran: 440
• Počet praktických ukázek: 170
• Rok vydání: 2022
• ISBN: 978-80-88253-08-2
• Formát: Tištěná kniha a e-kniha
• Web: www.vzhurudolu.cz/css-layout

Závěr

Kniha vyčerpávajícím způsobem rozebírá problematiku layoutů v CSS. Tím, že nejde o obecnou CSS příručku, ale věnuje se pouze vybrané části, tak jde opravdu do hloubky a do detailů. Doporučil bych ji všem front-end vývojářům a kodérům.