Okraj HTML Šablony

Čisté rámečkové HTML šablony

Rámečkové HTML šablony poskytují připravené sekce, kde viditelný rám nebo dělicí linka vymezuje samostatnou jednotku obsahu, jako je projekt v portfoliu nebo nabídka služeb. Za každým rámem se skrývá malý, opakující se fragment kódu a jeho uspořádání určuje, jak snadno můžete sekci zkopírovat, zkrátit nebo znovu naplnit.

Co se nachází uvnitř každého rámu

Úplný rám ohlašuje nezávislou jednotku, kterou lze přesunout jinam, zatímco dělicí linka odděluje části, jež stále patří k sobě. Nejčastěji používaná ohraničená rozvržení bývají vytvořena takto:

• mřížky portfolia, kde se každý projekt chová jako samostatný „článek“ s nadpisem, popisem a odkazem;
• karty funkcí, které opakují stejné pořadí nadpisu, textu a akce v každém ohraničeném kontejneru;
• redakční bloky, kde jediná dělicí linka odděluje shrnutí od podrobností v rámci jedné „sekce“;
• panely specifikací, kde jeden vnější rám drží celou skupinu pohromadě a tenké vnitřní linky ji dělí na řádky.

Projekt lze duplikovat, smazat nebo změnit jeho pořadí, aniž by to narušilo okolní prvky. Samostatný řádek specifikací má mimo svou skupinu malý význam, takže přidělení vlastního rámu každému řádku vytváří pouze zbytečné vnoření, které budete muset později rozplétat. Pokud prázdný řádek položky již odděluje, obalení každé z nich jen kvůli vykreslení čáry zbytečně prohlubuje kód bez jakéhokoli vizuálního přínosu.

Prvek Mřížka od Nicepage se skvěle hodí právě pro takové opakující se skupiny. Mřížka řídí uspořádání a každá položka si zachovává svůj vlastní rám, takže nový projekt zapadne do řady bez nutnosti jejího přebudování.

Úsporný kód, který můžete snadno opakovat

Galerie nebo řada cenových panelů zůstává snadno spravovatelná, pokud každá jednotka dodržuje stejný stručný vzor. Každá karta začíná nadpisem o úroveň nižším než nadpis sekce, po kterém následuje obsah a volitelná akce. Přidání karty znamená zkopírovat jeden blok a upravit jeho text. Šablony, které každou kartu tvoří trochu jinak – tu s přebytečným obalem a jinde s chybějícím nadpisem –, mění rychlou úpravu v detektivní pátrání.

Pořadí čtení po složení sloupců

Když se sloupce ohraničených karet na úzké obrazovce složí do jednoho, seřadí se přesně v tom pořadí, v jakém jsou zapsány v kódu. Některé šablony sestavují řádek obrázků a pod něj umísťují samostatný řádek s popisky. Na notebooku to působí jako čtyři úhledné projekty, ale na telefonu se nejprve zobrazí všechny obrázky a popisky následují až potom hromadně za sebou.

Kvalitní rámečková HTML šablona vám umožní ukázat na jakýkoli řádek a přesně určit, k čemu náleží. Rychlý pohled do kódu by měl jasně ukázat, které zarámované jednotky stojí samostatně, které linky pouze dělí skupinu a které bloky lze beze změny přesunout do jiné části webu.