Suplement Szablony CSS

Szablony CSS dla suplementów, które możesz ostylować na nowo bez przebudowy

Szablon CSS dla suplementów to gotowy projekt strony z otwartym arkuszem stylów: kod znaczników już istnieje, a kolory, fonty, odstępy, przyciski i zachowanie siatki znajdują się w regułach CSS, które można edytować. Nie piszesz arkusza stylów od zera. Modyfikujesz kod kogoś innego, co jest zupełnie innym zadaniem i niesie ze sobą inne pułapki.

Co faktycznie edytujesz

Większość pracy sprowadza się do niewielkiego zestawu wartości. Kolory marki zastępują paletę szablonu, która zazwyczaj składa się z kilku wartości heksadecymalnych. Fonty zmienia się w jednej lub dwóch deklaracjach font-family, dopasowując do nich wielkości tekstu i wysokości linii. Odstępy są elementem najczęściej niedocenianym: wewnętrzne dopełnienia (padding) i marginesy sekcji decydują o tym, że szablon przestaje wyglądać jak wersja demonstracyjna, i to właśnie tam nawarstwiają się modyfikacje.

Następnie pojawiają się klasy wielokrotnego użytku. Szablon dostarcza style przycisków, kart, etykiet i poziomów nagłówków. Wystarczy raz zmienić styl danej klasy, aby każda jej instancja przejęła te zmiany. Edytowanie tej samej reguły piętnaście razy lub dodawanie stylów liniowych (inline) do pojedynczych elementów świadczy zazwyczaj o pominięciu klasy i przejściu bezpośrednio do elementu.

Układ opiera się na regułach Grid i Flexbox: liczbie kolumn, odstępach (gaps) i wyrównaniu. Podobnie wygląda kwestia zachowania responsywnego wewnątrz zapytań media queries, które zmieniają układ dla szerokości tabletów i telefonów. Zmiana liczby kolumn na ekranie komputera wymaga natychmiastowego sprawdzenia punktów przerwania (breakpoints). To w tym miejscu ostylowanie najczęściej ulega zaburzeniu.

Co warto zrobić przed wyborem szablonu CSS dla suplementów: zobacz, jak napisany jest arkusz stylów, o ile podgląd na to pozwala. Nazwane klasy i zmienne oznaczają jedno popołudnie na rebranding. Tysiące wygenerowanych selektorów oznaczają tydzień pracy.

Gdzie umieszczać reguły niestandardowe

Nicepage zachowuje wbudowane kontrolki do rutynowego stylowania, pozostawiając Custom CSS Code dla wszystkich innych przypadków. Reguły mogą dotyczyć pojedynczego elementu, pojedynczej strony lub całej witryny; przewodnik po Custom CSS wyjaśnia te trzy poziomy oraz sposób ich kaskadowości. Reguły niestandardowe służą do obsługi specyficznego stanu najechania kursorem (hover), uzyskania kształtu niedostępnego w standardowych kontrolkach lub pojedynczego wyjątku w sekcji. Eksport minimalnego CSS na stronę ogranicza wyjściowy kod każdej strony wyłącznie do stylów przez nią wykorzystywanych, co warto włączyć, gdy jeden rozbudowany szablon obsługuje wiele prostych stron.

Większość tego, co odbiera się jako design na stronie z suplementami, sprowadza się do czterech powtarzających się wartości: zestawu fontów, palety barw, skali odstępów i promienia zaokrąglenia krawędzi. Zmień je konsekwentnie, a szablon stanie się nie do poznania. Zmień osiem na dziesięć, a szablon pozostanie rozpoznawalny dokładnie w tych dwóch pominiętych miejscach.