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

Szablon CSS podróży zawiera warstwę wizualną układu podróży: styl kart, reguły odstępów i skalę czcionek, która sprawdza się w przypadku długich nazw miejsc. Klasy stanów zazwyczaj są dołączone, dzięki czemu aktualny przystanek może wyglądać inaczej niż dwanaście kolejnych. Karty miejsc docelowych i etapy trasy korzystają z tych samych klas, więc dwutygodniowa podróż wygląda jak jeden projekt.

Karty, identyfikatory i etykiety dat są stylizowane

Ręczne stylizowanie w przypadku powtarzających się bloków jest kosztowne. Dziesięć kart miejsc docelowych musi uzgodnić odstępy, promień narożników i proporcje obrazu, a szablon rozstrzyga to raz na zawsze.

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

• współdzielone klasy dla kart planu podróży i bloków etapów
• odstępy, które zapewniają czytelność gęstego harmonogramu dnia po dniu
• stylizacja znaczków poprzez tło, obramowanie i grubość czcionki
• etykiety dat powiązane z tą samą skalą czcionki co nagłówki

Wiele szablonów dodaje klasy stanów, aby oznaczyć ukończony etap lub aktualny przystanek. Sprawdź, czy demo je wyświetla, ponieważ karty o tej samej grubości wizualnej są wolniejsze w skanowaniu.

Gdzie jedna niestandardowa reguła jest lepsza od globalnej edycji

Współdzielony styl przestaje działać, gdy jeden element łamie schemat. Wyprzedane odejście jest jednym z wyjątków w jednolitym zestawie kart, a edycja współdzielonej klasy zmieniłaby każdą kartę.

Zwykle stosuje się drugą klasę nałożoną na klasę bazową, dzięki czemu karta zachowuje swoje współdzielone reguły i otrzymuje wąskie nadpisanie koloru lub grubości.

Nicepage zachowuje niestandardowy kod CSS właśnie w tym celu. Dokumentacja Custom CSS wyjaśnia, jak napisać i zastosować regułę do pojedynczego elementu. Kolory, czcionki i odstępy rzadko wymagają tego kroku, ponieważ elementy wizualne już do nich docierają; znacznik na dzisiejszym przystanku już tak.

Wąskie ekrany zmieniają to, co pasuje

Otwórz demo na telefonie i przejdź bezpośrednio do planu podróży. Długie nazwy miejsc docelowych zawijają się najpierw, a data obok nich traci swoją linię. Reguły punktów przerwania rozwiązują ten problem, zmniejszając rozmiar czcionki w kolumnie harmonogramu, zmniejszając odstępy i ograniczając szerokość samej karty. Sekcje siatki obsługują zwijanie kolumn, a nadpisania docelowe obsługują karty z długimi etykietami.

Trzy sprawdzenia powiedzą Ci, czego potrzebujesz. Stylizacja stanu jest pierwsza, ponieważ standardowa demonstracja często ją pomija. Następnie umieść najdłuższą nazwę miejsca na karcie i obserwuj, gdzie się przerywa. Ostatnie pytanie dotyczy nadpisania: jak daleko sięgają elementy wizualne, zanim będziesz potrzebować niestandardowej reguły.