Mozaika Szablony HTML

Responsywne szablony HTML mozaiki

Szablon HTML mozaiki otrzymujesz w postaci plików, które możesz otworzyć w edytorze: strony, arkusza stylów oraz obrazów osadzonych już w sekcjach o różnej szerokości. Zrzut ekranu wersji demonstracyjnej przedstawia jeden z układów tych kafelków. Wszystko, co zrobisz później, odbywa się w kodzie źródłowym, dlatego warto otworzyć pliki źródłowe przed samym podglądem.

Większość tej pracy pozostaje na poziomie treści. Wymienia się zdjęcia, redaguje na nowo podpisy, a karty duplikuje się, gdy galeria rozrasta się poza wersję demo.

Kod ukryty za nieregularnymi blokami obrazów

Kompozycje kafelkowe są budowane na bardzo różne sposoby, a różnica ujawnia się w momencie dodania kolejnego elementu. Siatka oparta na rozpiętościach kolumn i wierszy działa poprawnie nawet po skopiowaniu karty. Układ oparty na sztywnych przesunięciach wymaga ręcznych poprawek przy każdej zmianie.

Takie sekcje zwykle stanowią trzon strony w układzie mozaiki:

• szeroki kafelek ze zdjęciem i krótkim tytułem nałożonym na wierzch
• karta powtarzająca się w galerii lub kanale kategorii
• kafelek tekstowy na opis usługi, notatkę lub cytat
• kafelek wezwania do działania, który domyka całą grupę wizualną

Żaden szablon nie zawiera domyślnie wszystkich tych wariantów, dlatego warto otworzyć wersję demo, ocenić elementy rzeczywiście nadające się do wielokrotnego użytku, a resztę pominąć.

Kolejność w kodzie źródłowym na wąskich ekranach

Na telefonie kompozycja wyświetla się w jednej kolumnie, a układ tej kolumny odpowiada kolejności w Twoim pliku. Kafelek w prawym górnym rogu na laptopie może na telefonie zająć czwarte miejsce, mimo że nadal prezentuje kluczowy projekt.

Można to szybko zweryfikować. Wyłącz style w przeglądarce i przeczytaj stronę jako zwykły tekst. To, co zobaczysz, niemal idealnie odzwierciedla kolejność, którą użytkownik przewija kciukiem. Jeśli coś istotnego zostało zepchnięte zbyt nisko, przenieś tę sekcję w kodzie HTML. Kolejna reguła media query jedynie zamaskowałaby problem.

Modyfikacja kodu przykładowego bez naruszania struktury kafelków

Traktuj treść demonstracyjną jak zestaw części zamiennych. Skopiuj kafelek, który zachowuje się dokładnie tak, jak potrzebujesz, wklej go w miejscu dalszego ciągu galerii, a następnie zmień w nim grafikę i tekst. Pozostaw nazwy klas w formie nadanej przez autora – zmienianie tej konwencji w połowie projektu generuje więcej pracy niż jej zachowanie.

Następnie zwężaj okno przeglądarki, aż mozaika zwinie się w jedną kolumnę, i sprawdź, który projekt użytkownik zobaczy jako pierwszy. Jeśli to ten, który bez wahania zaprezentujesz klientowi, szablon jest gotowy na wprowadzenie Twoich treści.