Polityka Szablony CSS

Kreatywne szablony CSS dla polityki

Szablony CSS dla polityki są dostarczane z gotowymi stylami: dopasowanymi kartami zagadnień, ujednoliconą oprawą cytatów z poparciem i przyciskami dla sympatyków, które tworzą spójny zestaw. Twoim zadaniem jest jedynie dopasowanie tego systemu wizualnego do konkretnej kampanii, a najlepsze szablony to te, które wymagają do tego najmniejszej liczby zmian.

Stylowanie powtarzalnych komponentów

Materiały wyborcze powielają te same formy z inną zawartością tekstową, dlatego większość decyzji wizualnych podejmuje się raz i stosuje kaskadowo do wszystkich elementów opartych na tym samym wzorcu. Tożsamość kampanii opiera się na trzech z nich:

1. Kolorystyka, utrzymana konsekwentnie w obszarze header, na kartach zagadnień oraz przycisku wsparcia, z osobnym stanem dla pilnych komunikatów.
2. Typografia, podzielona według funkcji, tak aby hasło wyborcze, nazwisko kandydata i nagłówki zagadnień miały różną hierarchię wizualną.
3. Hierarchia przycisków, ponieważ główne wezwanie do działania i dodatkowy link nie powinny przyciągać uwagi z jednakową siłą, uwzględniając stany najechania (hover) i aktywacji (focus).

Karty są miejscem, w którym system przechodzi prawdziwy sprawdzian. Karta tematyczna z dwuwyrazowym tytułem i karta z pełnym zdaniem nadal muszą być idealnie wyrównane, co zależy od odstępów, formatowania nagłówków i wysokości samej karty. Cytaty z poparciem sprawiają jeszcze więcej trudności, ponieważ jeden zwolennik napisze jedno zdanie, a kolejny cały akapit.

Siatki zagadnień a urządzenia mobilne

Rząd sześciu kart zagadnień sprawdza się na komputerze stacjonarnym, lecz jest niemożliwy do wyświetlenia na telefonie. Grid Element umieszcza powiązane elementy w komórkach i pozwala na zmianę tego układu na węższych ekranach, dzięki czemu te same pozycje układają się w jedną kolumnę. Trzy elementy psują się najczęściej:

1. Długie nazwy ustaw, które zawijają się do trzeciego wiersza i zniekształcają resztę karty.
2. Zdjęcie kandydata, które zachowuje proporcje z wersji desktopowej, podczas gdy biografia obok zamienia się w wąski pasek tekstu.
3. Listy wydarzeń, w których data, miejsce i link do rejestracji przestają się wyrównywać po ułożeniu w pionie.

Nazwiska kandydatów to kolejny test wytrzymałości projektu. Pełne nazwisko z tytułem naukowym i długą nazwą sprawowanego urzędu rzadko mieści się w przestrzeni przewidzianej w wersji demonstracyjnej. Nagłówek musi zawinąć się estetycznie, inaczej zepsuje cały blok.

Wyjątki, które warto napisać ręcznie

Niektóre elementy wymagają własnej reguły. Wyróżnione ogłoszenie kampanii lub pilna informacja o zmianie miejsca wiecu mogą wymagać schematu kolorystycznego, którego reszta projektu w ogóle nie używa. Nicepage obsługuje w tym celu Custom CSS Code, a dokumentacja Custom CSS opisuje reguły, które można zastosować do pojedynczego elementu, sekcji lub całej witryny.

Stosuj takie wyjątki z umiarem. System wizualny, który wymaga ciągłego nadpisywania, był od początku złym wyborem. Najpewniejszym dowodem dobrego systemu jest to, jak radzi sobie z realnymi materiałami kampanii: długimi nazwiskami kandydatów, cytatami o różnej długości i stale rosnącym harmonogramem wydarzeń.