Kolor Szablony CSS

Konfigurowalne kolorowe szablony CSS dla precyzyjnej kontroli stylu

Gotowa paleta kolorów z łatwością pokrywa większość projektów. Przyciski, linki i tła kart podążają za nią, a to pokrywa 80-90 procent witryny. Problem zaczyna się od reszty: znaczka, który potrzebuje własnego akcentu, przycisku, którego najechanie kursorem musi przetrwać ciemny obraz, bloku gradientowego, który zachowuje się inaczej na telefonie. Dla tej reszty istnieją kolorowe szablony CSS.

Reguły globalne i wyjątki lokalne

Przydatnym pytaniem dotyczącym szablonu ze stylami jest to, jak wyraźnie oddziela on warstwę współdzieloną od warstwy jednorazowej. Warstwa współdzielona zawiera wszystko, co odwiedzający napotyka wielokrotnie:

• przyciski główne i drugorzędne we wszystkich stanach wizualnych;
• kolory linków i nagłówków w treści głównej;
• zwykłe tła kart, obramowania i separatory.

Wszystko inne jest wyjątkiem: blok sezonowy, ciemna powierzchnia wokół grafiki, jeden wyróżniony element, który musi przyćmić sąsiednie. Gdy szablon łączy te dwa elementy, zmiana przycisku zamienia się w poszukiwanie skarbów.

Najechanie kursorem, fokus, zaznaczenie

Weźmy jedną kartę produktu jako przypadek testowy. Ma ona tło spoczynkowe, obramowanie, które zmienia się po wybraniu elementu, oraz cień po najechaniu kursorem. Dodaj kontur fokusu dla użytkowników klawiatury i zadbaj o czytelność tekstu — pięć wariantów dla jednego komponentu, z przejrzystym szablonem, który pozwoli na ich wyraźne powiązanie.

Najechanie kursorem powinno zmienić istniejący akcent, rozjaśnić go lub pogłębić, i pozostać w palecie kolorów używanej przez witrynę wszędzie indziej. Kontur fokusu musi być widoczny na kolorowej powierzchni, co jest problemem wielu szablonów. Stan zaznaczenia nigdy nie może wyglądać jak stan najechania kursorem, w przeciwnym razie odwiedzający nie będą wiedzieć, co tak naprawdę wybrali.

Nicepage obsługuje niestandardowy kod CSS, gdy komponent potrzebuje czegoś, czego nie obejmują standardowe elementy wizualne. Niestandardowe elementy CSS pokazują, jak zapisywane są reguły i przypisywane klasy, utrzymując specjalny przypadek przypisany do jednego elementu, zamiast przeciekać do nieobjętych nim sekcji.

Nadpisywanie zakresu do pojedynczych komponentów

Punkty przerwania zasługują na więcej uwagi niż zazwyczaj. Na szerokim ekranie karta może zapożyczyć znaczenie od kolorowego bloku obok niej. Gdy wiersz siatki lub Flexboxa zwinie się w wąski stos, sąsiad znika, więc punkt przerwania czasami dotyka tła lub sposobu przetwarzania tekstu wraz z odstępami.

Warto również pomyśleć o eksportach. Jeśli jedna strona kampanii zawiera reguły kolorów, których nie używa nikt inny, nie ma powodu, aby wysyłać te deklaracje do każdego odwiedzającego. Eksport minimalnej liczby CSS na stronę może zapisać je w osobnym pliku. Reguła jest krótka: powtarzający się wzór należy do warstwy współdzielonej; pojedynczy pozostaje lokalny.