Szablony CSS z dodatkami, które można modyfikować bez przebudowy

Szablon CSS z dodatkami to gotowy projekt strony, który jest dostarczany z otwartym arkuszem stylów: znaczniki już istnieją, a kolory, czcionki, odstępy, przyciski i zachowanie siatki są zawarte w regułach CSS, które można edytować. Nie tworzysz arkusza stylów od zera. Zmieniasz czyjś, co jest zupełnie innym zadaniem z innymi pułapkami.

Co tak naprawdę 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 szesnastkowych. Czcionki zmieniają się w jednej lub dwóch deklaracjach rodziny czcionek, a także w rozmiarach i wysokościach linii wokół nich. Odstępy to element, którego ludzie nie doceniają: odstępy między sekcjami i marginesy sprawiają, że szablon nie wygląda jak wersja demonstracyjna, i to właśnie tam gromadzą się zmiany.

Następnie pojawiają się klasy wielokrotnego użytku. Szablon udostępnia style przycisków, karty, identyfikatory i poziomy nagłówków. Zmień styl każdej klasy raz, a każde kolejne wystąpienie będzie takie samo. Edytowanie tej samej reguły piętnaście razy lub umieszczanie nadpisań w poszczególnych elementach zazwyczaj oznacza, że ktoś pominął klasę i przeszedł od razu do elementu.

Układ jest zawarty w regułach siatki i Flexbox: liczba kolumn, odstępy, wyrównanie. Podobnie jest z responsywnością, w zapytaniach o media, które przerysowują elementy do szerokości tabletu i telefonu. Zmień liczbę kolumn na komputerze i natychmiast sprawdź punkty przerwania. To właśnie tam najczęściej kończy się zmiana stylu.

Warto to zrobić przed zakupem dodatkowego szablonu CSS: sprawdź, jak napisany jest arkusz stylów, jeśli podgląd na to pozwala. Nazwane klasy i zmienne oznaczają popołudnie rebrandingu. Tysiące wygenerowanych selektorów oznaczają tydzień.

Gdzie są reguły niestandardowe

Nicepage zachowuje wbudowane elementy sterujące do rutynowego stylizowania i pozostawia niestandardowy kod CSS do wszystkiego innego. Reguły mogą dotyczyć pojedynczego elementu, pojedynczej strony lub całej witryny; Przewodnik po niestandardowym CSS wyjaśnia trzy poziomy i sposób ich kaskadowania. Reguły niestandardowe dotyczą konkretnego stanu najechania kursorem, kształtu, którego standardowe elementy sterujące nie generują, lub pojedynczego wyjątku w sekcji. Funkcja „Eksportuj minimalny CSS na stronę” przycina dane wyjściowe każdej strony do stylów używanych przez daną stronę, co warto włączyć, gdy jeden duży szablon obsługuje wiele prostych stron.

Większość tego, co można odczytać jako projekt na stronie uzupełniającej, to cztery powtarzające się wartości: stos czcionek, paleta, skala odstępów i promień obramowania. Konsekwentna zmiana tych wartości spowoduje, że szablon stanie się nierozpoznawalny. Zmiana ośmiu z dziesięciu miejsc spowoduje, że szablon pozostanie rozpoznawalny dokładnie w dwóch pominiętych miejscach.