Granica Szablony HTML

Przejrzyste szablony HTML z obramowaniem

Szablony HTML z obramowaniem oferują gotowe sekcje, w których widoczna ramka lub linia podziału wyznacza odrębną jednostkę treści, taką jak projekt w portfolio czy oferta usług. Za każdą ramką kryje się niewielki, powtarzalny fragment kodu, a jego układ decyduje o tym, jak łatwo można kopiować, przycinać lub na nowo wypełniać daną sekcję.

Co kryje się wewnątrz każdej ramki

Pełna ramka sygnalizuje niezależną całość, którą można przenieść w inne miejsce, natomiast separator dzieli elementy, które nadal tworzą jedną całość. Najczęściej spotykane układy z obramowaniem budowane są następująco:

• siatki portfolio, w których każdy projekt działa jak samodzielny „artykuł” z tytułem, opisem i linkiem;
• karty funkcji, które powtarzają tę samą kolejność nagłówka, tekstu i wezwania do działania w każdym obramowanym kontenerze;
• bloki redakcyjne, gdzie pojedyncza linia podziału oddziela podsumowanie od szczegółów w obrębie jednej „sekcji”;
• panele specyfikacji, w których jedna zewnętrzna ramka spina całą grupę, a cienkie wewnętrzne linie dzielą ją na wiersze.

Projekt można powielać, usuwać lub przestawiać bez naruszania sąsiednich elementów. Pojedynczy wiersz specyfikacji ma niewielkie znaczenie poza swoją grupą, więc przypisywanie każdemu wierszowi osobnej ramki dodaje tylko zagnieżdżenia, które trzeba będzie później rozplątywać. Gdy pusty odstęp już oddziela pozycje, zamykanie każdej z nich w dodatkowym znaczniku tylko po to, by narysować linię, komplikuje kod bez żadnego zysku wizualnego.

Element Siatki w Nicepage doskonale sprawdza się w przypadku takich powtarzających się grup. Siatka odpowiada za rozmieszczenie, a każdy element zachowuje własną ramkę, dzięki czemu nowy projekt trafia w szereg bez konieczności jego przebudowywania.

Zwięzły kod, który można łatwo powielać

Galeria lub rząd kart cennika pozostają łatwe w utrzymaniu, gdy każda jednostka trzyma się tego samego, zwięzłego schematu. Każda karta otwiera się nagłówkiem o jeden poziom niższym od nagłówka sekcji, po czym następuje jej treść i opcjonalna akcja. Dodanie karty sprowadza się do skopiowania jednego bloku i zmiany tekstu. Szablony, w których każda karta jest skonstruowana nieco inaczej – tu z nadmiarowym kontenerem, a tam z brakującym nagłówkiem – zamieniają szybką edycję w żmudne dochodzenie.

Kolejność czytania po zwinięciu kolumn

Gdy kolumny obramowanych kart zwijają się w jedną na wąskim ekranie, układają się w kolejności występowania w kodzie. Niektóre szablony tworzą wiersz obrazów z osobnym rzędem podpisów pod spodem. Na laptopie wygląda to jak cztery zgrabne projekty, lecz na telefonie najpierw wyświetlają się wszystkie zdjęcia, a pod nimi zbita gromada podpisów.

Dobry szablon HTML z obramowaniem pozwala wskazać dowolną linię i natychmiast stwierdzić, do czego przynależy. Rzut oka na kod powinien wystarczyć, by określić, które obramowane jednostki funkcjonują samodzielnie, które linie tylko dzielą grupę, a które bloki można przenieść nienaruszone w inne miejsce witryny.