Határ HTML Sablonok

Letisztult szegélyes HTML-sablonok

A szegélyes HTML-sablonok kész szakaszokat biztosítanak, amelyekben egy látható keret vagy elválasztó vonal különálló tartalmi egységet jelöl, például egy portfólióprojektet vagy egy szolgáltatásajánlatot. Minden keret mögött egy apró, ismétlődő kódrészlet áll, és ennek felépítése határozza meg, milyen könnyen másolható, szűkíthető vagy tölthető újra a szakasz.

Mi található az egyes kereteken belül

A teljes keret egy olyan önálló egységet jelez, amely máshová is áthelyezhető, míg az elválasztó vonal azokat az elemeket különíti el, amelyek továbbra is összetartoznak. A leggyakrabban előforduló szegélyes elrendezések így épülnek fel:

• portfóliórácsok, ahol minden projekt önálló „cikk”-ként viselkedik címmel, leírással és hivatkozással;
• funkciókártyák, amelyek minden bekeretezett tárolóban ugyanazt a címsor-, szöveg- és műveletsorrendet ismétlik;
• szerkesztői blokkok, ahol egyetlen elválasztó vonal választja el az összegzést a részletektől egyetlen „szakaszon” belül;
• specifikációs panelek, ahol egy külső keret fogja össze a csoportot, és vékony belső vonalak osztják sorokra.

Egy projekt duplikálható, törölhető vagy átrendezhető anélkül, hogy megzavarná a szomszédos elemeket. A specifikációk egyetlen sora keveset jelent a csoportján kívül, így ha minden sornak saját keretet adunk, az csak olyan beágyazást eredményez, amelyet később feleslegesen kell kibogozni. Ha egy üres sorköz már eleve elválasztja az elemeket, az egyes elemek külön körbefogása csupán egy vonal megrajzolásáért mélyíti a kódot anélkül, hogy látható előnyt nyújtana.

A Nicepage Rács eleme kiválóan alkalmas az ilyen ismétlődő csoportokhoz. A rács kezeli az elrendezést, és minden elem megtartja a saját keretét, így az új projekt zökkenőmentesen illeszkedik a sorba anélkül, hogy újra kellene építeni azt.

Karcsú kód, amely könnyen ismételhető

Egy galéria vagy egy ártáblázat-sor akkor marad könnyen kezelhető, ha minden egység ugyanazt a rövid mintát követi. Minden kártya a szakasz címsora alatti szintű címsorral indul, ezt követi a tartalma és egy opcionális művelet. Egy kártya hozzáadása csupán egyetlen blokk másolását és szövegének átírását jelenti. Azok a sablonok, amelyek minden kártyát kissé eltérően építenek fel – itt egy felesleges tárolóval, ott egy hiányzó címsorral –, a gyors szerkesztést nyomozómunkává változtatják.

Olvasási sorrend az oszlopok összecsukódása után

Amikor a keretes kártyák oszlopai keskeny képernyőn egyetlen oszlopba rendeződnek, pontosan a kód szerinti sorrendben jelennek meg. Egyes sablonok egy képsort hoznak létre, amely alá egy külön feliratsor kerül. Laptopon ez négy rendezett projektnek tűnik, telefonon viszont először az összes kép jelenik meg, a feliratok pedig ömlesztve követik őket.

Egy jó szegélyes HTML-sablon lehetővé teszi, hogy bármelyik sorra rámutatva azonnal megmondja, hová tartozik. A kódra vetett gyors pillantásnak egyértelművé kell tennie, mely keretes egységek állnak önmagukban, mely vonalak szolgálnak csupán egy csoport felosztására, és mely blokkok helyezhetők át érintetlenül a webhely más részeire.