Mozaika HTML Šablony

Responzivní mozaikové HTML šablony

Mozaiková HTML šablona přichází v podobě souborů, které můžete otevřít v editoru: stránka, stylopis a obrázky, které jsou již usazeny v sekcích o různých šířkách. Náhledový snímek obrazovky ukazuje jedno z možných uspořádání těchto dlaždic. Vše, co uděláte potom, se odehrává v kódu za nimi, a proto se vyplatí otevřít zdrojový kód ještě před samotným náhledem.

Většina této práce zůstává na úrovni obsahu. Fotografie se vymění, popisky se přepíší a karta se zduplikuje, jakmile se galerie rozroste nad rámec dema.

Zápis kódu za nepravidelnými bloky obrázků

Dlaždicové kompozice se sestavují velmi odlišnými způsoby a rozdíl se projeví v okamžiku, kdy přidáte další prvek. Mřížka propojená rozpětími sloupců a řádků funguje i po zkopírování karty. Rozvržení postavené na pevných odsazeních však vyžaduje ruční opravy při každé úpravě.

Sekce jako tyto obvykle nesou na mozaikové stránce největší váhu:

• široká obrazová dlaždice s krátkým titulkem umístěným přes ni
• karta, která se opakuje v galerii nebo ve výpisu kategorií
• textová dlaždice pro službu, poznámku nebo citát
• dlaždice s výzvou k akci, která uzavírá vizuální blok

Žádná šablona standardně nenabízí všechny tyto varianty, proto pomůže otevřít demo, spočítat prvky, které jsou skutečně znovupoužitelné, a zbytek ignorovat.

Pořadí ve zdrojovém kódu na úzkých obrazovkách

Telefon zobrazí kompozici v jediném sloupci a tento sloupec sleduje přesné pořadí vašeho souboru. Dlaždice v pravém horním rohu na notebooku se může na telefonu ocitnout až na čtvrtém místě, přestože nese klíčový projekt.

Existuje rychlý způsob, jak si to ověřit. Vypněte v prohlížeči styly a přečtěte si stránku jako prostý text. Výsledek odpovídá sekvenci, kterou návštěvník prochází palcem při posouvání. Pokud je tam něco důležitého odsunuto příliš nízko, přesuňte danou sekci přímo v HTML. Další media query by problém pouze zamaskovala.

Úprava ukázkového kódu bez poškození dlaždic

Přistupujte k ukázkovému obsahu jako k náhradním dílům. Zkopírujte dlaždici, která se již chová přesně podle vašich potřeb, vložte ji na místo, kde galerie pokračuje, a poté v ní vyměňte obrázek a text. Ponechte názvy tříd přesně tak, jak je zvolil autor – měnit tyto zvyklosti v polovině projektu stojí více času než jejich dodržení.

Poté zužujte okno prohlížeče, dokud se mozaika nesbalí do jediného sloupce, a sledujte, na který projekt návštěvník narazí jako první. Pokud je to ten, který byste bez váhání ukázali klientovi, šablona je připravena pro váš obsah.