Miejski Szablony CSS

Wydajne miejskie szablony CSS

Arkusz stylów miejskiego szablonu decyduje o tym, jak zdjęcie ulicy na pełną szerokość łączy się ze zwartym blokiem adresów, dat i cen. Miejskie szablony CSS zawierają te reguły w gotowej postaci — od zachowania siatki po skalę typograficzną i style komponentów. Galeria nowoczesnej architektury może opierać się na cienkich liniach podziału i stonowanych szarościach, podczas gdy strona wycieczek miejskich wybierze wyraziste bloki kolorów i duże numery tras. Obie bazują na tych samych rodzajach reguł.

Wzorce wizualne tworzące miejski charakter

Większość miejskich arkuszy stylów zawiera kilka powtarzających się wzorców wizualnych, a każdy z nich to zestaw reguł CSS, które można edytować:

• Siatki modułowe oparte na CSS Grid, w których karty wycieczek lub projektów dzielą tę samą szerokość i odstęp.
• Stałe proporcje zdjęć, dzięki którym pionowe ujęcie ulicy i szeroka panorama wieżowców mogą znaleźć się w jednej galerii bez nierównych przerw.
• Zwarte wiersze metadanych ułożone za pomocą Flexbox dla dzielnicy, czasu trwania lub ceny, złożone drobnym drukiem wersalikami z dużym światłem między literami.
• Nakładki oddzielające gęsty blok danych od szczegółowego zdjęcia, takie jak ciemna, półprzezroczysta warstwa pod białym tekstem.

Ponieważ wzorce te się powtarzają, powinny należeć do wspólnych klas. Jedna klasa karty może obsłużyć wycieczki, projekty i wydarzenia, podczas gdy klasa modyfikatora zmienia tylko to, co inne, na przykład przyciemniony wygląd dla wyprzedanych terminów. Stany hover i focus znajdują się w tych samych regułach, dzięki czemu karta reaguje identycznie bez względu na miejsce wyświetlenia.

Punkty przerwania konfigurowane dla komponentów

Dobre punkty przerwania wynikają z obserwacji, jak zmniejszają się poszczególne komponenty. Wiersz metadanych na karcie wycieczki zazwyczaj załamuje się jako pierwszy, na długo przed tym, jak pojawią się trudności ze zdjęciem, a reguła media query pozwala przenieść go pod tytuł. Następny w kolejności jest panel z miejscem zbiórki. Na telefonach zazwyczaj przesuwa się on pod zdjęcie, a niższe zdjęcie pozwala zachować adres na pierwszym ekranie. Zwarte nagłówki również wymagają uwagi, ponieważ mogą dzielić się na pojedyncze słowa w wierszu. Tryby responsywne w Nicepage pokazują każdy układ od dużych ekranów po telefony, z możliwością dostosowania odstępów i rozmiarów czcionek dla każdego trybu.

Reguły niestandardowe ograniczone do minimum

Niektóre miejskie detale wymagają reguły niestandardowej, na przykład filtr skali szarości wyłączający się po najechaniu kursorem czy przerywana linia nawiązująca do oznakowania dróg. Nicepage obsługuje niestandardowy CSS dla pojedynczego elementu, jednej strony lub całej witryny. Sama treść pozostaje nienaruszona, podczas gdy zmienia się jej wygląd. Aby porównać miejskie szablony CSS, policz, ile typów stron mogą obsłużyć wspólne klasy. Jeśli wycieczki, galerie i dane kontaktowe używają tych samych kilku komponentów, nadpisywanie stylów pozostaje rzadkością, a arkusz jest prosty w utrzymaniu.