Przewodniki stylów, znane również jako biblioteki wzorców, to świetny sposób na zapewnienie, że projekt będzie zgodny z założeniami w miarę rozwoju witryny lub gdy nowi członkowie zespołu pracują nad projektem internetowym. Każdy styl lub wzór to grupa znaczników i stylów elementów projektu witryny.

Nowoczesne przewodniki stylistyczne są zwykle wyświetlane jako rzeczywista strona internetowa, która pokazuje różne elementy projektu witryny lub aplikacji. Gdy nad projektem internetowym pracuje wiele osób lub nawet wiele zespołów, przewodnik po stylu pozwala zgadywać, jak powinny wyglądać elementy wizualne. To świetny sposób, aby wszyscy byli na tej samej stronie, aby zapewnić spójność projektu.

Utrzymuj swój zespół na dobrej drodze, a kod DRY

Oprócz projektu wizualnego przewodnik po stylu pomaga upewnić się, że plik CSS nie wymknie się spod kontroli. Wszyscy doświadczyliśmy powtarzalnego kodu, więc starajmy się, aby kod był możliwy do utrzymania i bez niczego absolutnie koniecznego. Jeśli wszyscy w Twoim zespole widzą wszystkie style w jednym miejscu, będzie łatwo rozpoznać, które aktualnie istnieją, więc nie są powielane w arkuszu stylów.

Ponieważ Twój przewodnik po stylu służy jako kolekcja zawierająca projekt modułów i inne elementy projektu, łatwo jest sprawdzić, czy nowe elementy projektu pasują do ustalonych standardów.

Co powinno znaleźć się w internetowym przewodniku po stylu?

Jak wiemy, projektowanie stron internetowych ma tendencję do szaleństwa. Dobrą wiadomością jest to, że skuteczne projektowanie stron internetowych, zwłaszcza przy użyciu przewodnika po stylu, jest pod Twoją kontrolą. Przewodniki po stylach wahają się od bardzo prostych do bardzo złożonych. Zamieściłem tutaj kilka pomysłów na dobry początek.

Palety kolorów

Dobrym pomysłem jest uwzględnienie próbek z zaznaczonym kolorem szesnastkowym. Twoje przyszłe ja, chrupane w czasie, podziękuje ci! Nie pamiętam, ile razy pytałem lub pytano mnie: „Jaki jest znowu ten kolor szesnastkowy?” Szybki numer referencyjny z pewnością przyda się każdemu.

Typografia i hierarchia

Opisowe symbole zastępcze nagłówków mogą znacznie pomóc Twojemu zespołowi zrozumieć, w jakim kontekście elementy w Twoim układzie muszą być używane.

Przewodniki po stylach powinny również zawierać sugerowaną hierarchię nagłówków. Czym jest h1, h2, h3 i tak dalej? Opisowe słowa, takie jak nagłówek główny, nagłówek podrzędny i nagłówek widżetu paska bocznego, również eliminują wiele przyszłych domysłów.

Nie zapomnij uwzględnić mniej popularnych elementów typograficznych, takich jak na przykład cytaty blokowe. Musisz podać wszystkie przykłady tekstowe, nawet te rzadko używane. Jeśli masz określony styl nagłówka i treści dla cytatów blokowych lub referencji, określ je z takimi samymi szczegółami, jak w przypadku częściej używanych elementów.

Obrazy

Uwzględnij ogólne traktowanie obrazów w swoim projekcie. Czy obrazy wymagają obramowania lub wyjątkowego efektu krycia? Czy istnieje interakcja najechania kursorem? Jeśli tak, weź to do swojego przewodnika po stylu. Jeśli istnieje wiele zabiegów, uwzględnij każdy z nich i określ, kiedy stosuje się określone zabiegi.

Style linków, nawigacji i formularzy

Z perspektywy UX linki, nawigacja i elementy formularza to trzy bardzo ważne kaczki, które należy mieć pod rząd. Bez wątpienia wiesz, że linki tekstowe, przyciski i style nawigacji muszą być uwzględnione w twoim przewodniku stylu. Można jednak łatwo zapomnieć o dołączeniu wystąpień stylów normalnych, najechania, odwiedzonych i aktywnych dla każdego z nich. Uzyskaj te udokumentowane, aby zapewnić spójność w każdym szczególe swojej witryny.

Gdy świetne style łączą się z formularzem, nie ma lepszego sposobu na pokazanie wszystkich elementów formularza internetowego niż w przewodniku po stylu. To świetny sposób na mapowanie i inwentaryzację wszystkich elementów formularza, co działa, co nie działa i czego brakuje.

Oto kilka kluczowych elementów, które należy uwzględnić w stylach formularzy:

• Normalny stan pola wejściowego
• Skupiony stan pola wejściowego
• Style etykiet
• Tekst zastępczy formularza
• Tekst aktywny użytkownika
• Tekst wprowadzony przez użytkownika
• Przycisk Prześlij
• Komunikat o błędzie
• Style pól wyboru

Więcej pomysłów do uwzględnienia w przewodniku po stylu

Trudno wymienić każdy element, który możesz napotkać, ale oto kilka innych, które mogą Ci się przydać:

• Skrzynka wywoławcza
• Łącza poziome
• Elementy komentarza
• Tagi kategorii
• Model wyskakujący

Jak stworzyć własny przewodnik po stylu sieciowym

Jeśli masz szczęście, że zmierzysz się z heroicznym wyczynem stworzenia przewodnika po stylu od podstaw, mam dla ciebie kilka pomocnych wskazówek.

Osobiście lubię zaczynać od pustego pliku HTML i stamtąd iść. Połącz ten przewodnik stylu z CSS rzeczywistej witryny lub aplikacji. W ten sposób zmiany są odzwierciedlane w obu miejscach i nie musisz się martwić o utrzymanie dwóch plików CSS.

Rozpocznij od spisu wszystkich elementów witryny, a następnie dodaj do swojego przewodnika stylu dokładnie takie znaczniki, jakich potrzebujesz dla każdego z nich. Brzmi onieśmielająco?

Najpierw oceń siatkę strony, a następnie wypełnij przewodnik stylu ważnymi elementami, takimi jak typografia i paleta kolorów, dodając więcej wzorów podczas pracy. Więcej wzorców projektowych może obejmować obrazy, cytaty blokowe, style paska bocznego, przyciski i style formularzy.

Zaufaj mi. To dobrze spędzony czas. Warto też przypomnieć, że nic nie jest trwałe i wszystko można łatwo dostosować i rozbudować.

Jeśli zależy Ci na szybkości i ręcznym wprowadzaniu wszystkich stylów, nie jest dla Ciebie, istnieje kilka świetnych narzędzi, które ułatwiają tworzenie i używanie wzorów wielokrotnego użytku.

Na przykład, Pattern Primer Jeremy'ego Keitha wygeneruje listę wszystkich wzorów w folderze. Jest to proste narzędzie PHP do przekształcania fragmentów kodu w bibliotekę wzorców. Zobaczysz wzorzec renderowany jako HTML.

Inną świetną opcją jest KSS Kyle'a Neatha, który jest również świetnym narzędziem do tworzenia dokumentacji przewodnika po stylu. Te wygenerowane style automatyczne to zestaw wskazówek, które pomogą Ci stworzyć przewodnik po stylu HTML powiązany z dokumentacją CSS. KSS został zaprojektowany tak, aby dobrze współpracował z preprocesorami CSS i obsługuje wiele struktur CSS.

Jak wszyscy wiemy, strona nigdy się nie kończy. Jeśli potrzebne są nowe elementy, możesz łatwo rozszerzyć swój przewodnik po stylu życia, po prostu go dodając.

Twój początkowy przewodnik po stylach może nie być identyczny ze stronami, które ostatecznie utworzysz, ale jest to świetna okazja do przetestowania nowych stylów i jest szczególnie pomocna przy projektowaniu dla wielu przeglądarek.

Przykłady poradników stylu

Potrzebujesz prawdziwych przykładów świetnych przewodników po stylu? Masz to:

Kod dla Ameryki
Mailchimp
Siły sprzedaży

Zapewniając spójność projektu, przewodnik po stylu ułatwia rozbudowę witryny i przyszłe ulepszenia sieci. Gdy style są dodawane i modyfikowane, ten dokument jest świetnym sposobem na informowanie zespołu i pokazywanie swojego projektu stylizacji.