Podróż Szablony CSS

Konfigurowalne szablony CSS podróży do stylizacji tras i planów wycieczek

Szablon CSS podróży obejmuje warstwę wizualną układu turystycznego: wygląd kart, reguły odstępów oraz skalę typograficzną, która zachowuje czytelność przy długich nazwach miejscowości. Zazwyczaj zawiera klasy stanów, dzięki czemu bieżący przystanek może odróżniać się od dwunastu wcześniejszych. Karty miejsc docelowych i etapy planu podróży korzystają z tych samych klas, sprawiając, że dwutygodniowy wyjazd wygląda spójnie.

Karty, odznaki i etykiety dat są już ostylowane

Powtarzające się bloki to element, przy którym ręczne stylowanie staje się czasochłonne. Dziesięć kart miejsc docelowych musi mieć jednakowe marginesy wewnętrzne, zaokrąglenie rogów oraz proporcje zdjęć, a szablon definiuje to raz na zawsze.

Stylizacja, którą może obejmować szablon podróży:

• wspólne klasy dla kart planu podróży i bloków etapów
• odstępy zapewniające czytelność gęstego harmonogramu dzień po dniu
• wygląd odznak definiowany przez tło, obramowanie i grubość fontu
• etykiety dat powiązane z tą samą skalą typograficzną co nagłówki

Wiele szablonów dodaje dodatkowo klasy stanów do oznaczania ukończonego etapu lub bieżącego przystanku. Warto sprawdzić, czy wersja demonstracyjna je prezentuje, ponieważ karty o jednakowej wadze wizualnej przegląda się wolniej.

Kiedy pojedyncza reguła niestandardowa wygrywa z edycją globalną

Wspólne style przestają pomagać, gdy jeden z elementów wyłamuje się ze schematu. Wyprzedany wyjazd stanowi wyjątek w jednolitym zestawie kart, a edycja wspólnej klasy zmieniłaby każdą z nich.

Standardowym rozwiązaniem jest dodanie drugiej klasy nałożonej na bazową, dzięki czemu karta zachowuje reguły wspólne i otrzymuje punktowe nadpisanie koloru lub grubości fontu.

Nicepage oferuje funkcję Custom CSS Code dokładnie w tym celu. Dokumentacja Custom CSS wyjaśnia, jak napisać i zastosować regułę do pojedynczego elementu. Kolory, kroje pisma i odstępy rzadko wymagają takiego kroku, ponieważ kontrolki wizualne w pełni je obsługują; znacznik dzisiejszego przystanku jednak tego wymaga.

Wąskie ekrany zmieniają układ treści

Otwórz demo na telefonie i przejdź bezpośrednio do planu podróży. Długie nazwy destynacji zawijają się jako pierwsze, a data obok nich traci swój wiersz. Reguły punktów przerwania (breakpoints) rozwiązują ten problem za pomocą mniejszego tekstu w kolumnie harmonogramu, ciaśniejszych odstępów i limitu szerokości samej karty. Sekcje siatki odpowiadają za zwijanie kolumn, a precyzyjne nadpisania pomagają przy kartach z długimi etykietami.

Trzy testy powiedzą Ci niemal wszystko. Stylizacja stanów jest najważniejsza, ponieważ standardowe wersje demo często ją pomijają. Następnie wklej najdłuższą nazwę miejscowości do karty i sprawdź, w którym miejscu tekst się łamie. Na koniec pozostaje kwestia nadpisywania: jak daleko sięgają kontrolki wizualne, zanim zajdzie potrzeba użycia reguły niestandardowej.