Руководства по стилю, также известные как библиотеки шаблонов, — отличный способ гарантировать, что ваш дизайн будет продолжаться так, как задумано, по мере роста вашего веб-сайта или когда новые члены команды работают над веб-проектом. Каждый стиль или шаблон представляет собой группу разметки и стилей для элементов дизайна вашего веб-сайта.

Современные руководства по стилю обычно отображаются в виде реальной веб-страницы, на которой показаны различные элементы дизайна веб-сайта или приложения. Когда несколько человек или даже несколько команд работают над веб-проектом, руководство по стилю избавляет от необходимости гадать, как должны выглядеть визуальные элементы. Это отличный способ держать всех на одной странице для согласованности проекта.

Держите свою команду на правильном пути, а ваш код СУХИМ

Помимо визуального дизайна, руководство по стилю помогает убедиться, что файл CSS не выйдет из-под контроля. Мы все сталкивались с повторяющимся кодом, поэтому давайте стремиться к тому, чтобы код поддерживался и не содержал ничего абсолютно необходимого. Если каждый в вашей команде может видеть все стили в одном месте, будет легко видно, какие из них существуют в настоящее время, и они не дублируются в таблице стилей.

Поскольку ваше руководство по стилю служит коллекцией, включающей дизайн модулей и другие элементы дизайна, легко увидеть, соответствуют ли новые элементы дизайна установленным стандартам.

Что должно быть в руководстве по веб-стилю?

Как мы знаем, веб-дизайн имеет тенденцию быть немного диким. Хорошая новость заключается в том, что эффективный веб-дизайн, особенно при использовании руководства по стилю, находится под вашим контролем. Руководства по стилю варьируются от очень простых до очень сложных. Я включил некоторые идеи здесь, чтобы вы начали.

Цветовые палитры

Это отличная идея, чтобы включить образцы, которые имеют отмеченный шестнадцатеричный цвет. Ваше будущее, сжатое временем, скажет вам спасибо! Я не могу вспомнить, сколько раз я спрашивал или меня спрашивали: «Что это за шестнадцатеричный цвет?» Имея краткий справочник, безусловно, пригодится для всех.

Типография и иерархия

Описательные заполнители заголовков могут помочь вашей команде понять, в каком контексте должны использоваться элементы вашего макета.

Руководства по стилю также должны включать рекомендуемую иерархию заголовков. Что такое h1, h2, h3 и так далее? Описательные слова, такие как основной заголовок, подзаголовок и заголовок виджета боковой панели, также устраняют много догадок в будущем.

Не забудьте включить менее распространенные элементы типографики, например, кавычки. Вы должны указать все текстовые примеры, даже редко используемые. Если у вас есть определенный стиль заголовка и основного текста для цитат или отзывов, укажите их с той же детализацией, что и для более часто используемых элементов.

Картинки

Включите общую обработку изображений для вашего проекта. Нужны ли изображениям границы или уникальный эффект непрозрачности? Есть ли взаимодействие при наведении? Если да, включите это в свое руководство по стилю. Если есть несколько методов лечения, включите каждое из них и укажите, когда используются определенные методы лечения.

Стили ссылок, навигации и форм

С точки зрения UX, ссылки, навигация и элементы формы — это три очень важные утки, которые нужно иметь подряд. Вы, несомненно, знаете, что текстовые ссылки, кнопки и стили навигации должны быть включены в ваше руководство по стилю. Однако можно легко забыть включить экземпляры обычного, наведенного, посещенного и активного стилей для каждого из них. Задокументируйте их, чтобы обеспечить согласованность каждой детали вашего сайта.

Когда отличные стили сливаются с формой, нет лучшего способа продемонстрировать все элементы веб-формы, чем руководство по стилю. Это отличный способ наметить и провести инвентаризацию всех элементов формы, что работает, что не работает и чего не хватает.

В частности, вот некоторые ключевые компоненты, которые следует включить в стили формы:

• Нормальное состояние поля ввода
• Сфокусированное состояние поля ввода
• Стили меток
• Текст заполнителя формы
• Пользовательский активный текст
• Текст, введенный пользователем
• кнопка отправки
• Сообщение об ошибке
• Стили флажков

Дополнительные идеи для включения в ваше руководство по стилю

Трудно перечислить все элементы, с которыми вы можете столкнуться, но вот еще несколько, которые могут оказаться полезными:

• Вызывная коробка
• Горизонтальные ссылки
• Элементы комментариев
• Теги категорий
• Всплывающая модель

Как сделать собственное руководство по веб-стилю

Если вам посчастливилось совершить героический подвиг создания руководства по стилю с нуля, у меня есть для вас несколько полезных соображений.

Лично мне нравится начинать с пустого HTML-файла и двигаться дальше. Свяжите это руководство по стилю с CSS реального веб-сайта или приложения. Таким образом, изменения отражаются в обоих местах, и вам не нужно беспокоиться об обслуживании двух файлов CSS.

Начните с инвентаризации всех элементов вашего сайта, а затем добавьте точную разметку, необходимую для каждого из них, в свое руководство по стилю. Звучит пугающе?

Сначала оцените сетку страницы, а затем заполните руководство по стилю важными элементами, такими как типографика и цветовая палитра, добавляя новые шаблоны по мере продвижения. Дополнительные шаблоны дизайна могут включать такие вещи, как изображения, цитаты, стили боковой панели, кнопки и стили форм.

Поверьте мне. Это хорошо проведенное время. Также полезно помнить, что ничто не является постоянным и что все можно легко изменить и расширить.

Если вы стремитесь к скорости и ручной ввод всех стилей не для вас, есть несколько отличных инструментов, которые упрощают создание и использование повторно используемых шаблонов.

Например, Учебник по шаблонам Джереми Кейта сгенерирует список всех шаблонов в папке. Это простой PHP-инструмент для превращения фрагментов кода в библиотеку шаблонов. Вы увидите шаблон, отображаемый как HTML.

Другим отличным вариантом является KSS Кайла Нита, который также является отличным инструментом для документирования руководств по стилю. Эти сгенерированные автоматически стили представляют собой набор рекомендаций, которые помогут вам создать руководство по стилю HTML, привязанное к документации CSS. KSS хорошо работает с препроцессорами CSS и совместим со многими фреймворками CSS.

Как мы все знаем, веб-сайт никогда не бывает законченным. Если нужны новые элементы, легко расширить руководство по стилю жизни, просто добавив к нему элементы.

Ваше первоначальное руководство по стилю может не совпадать со страницами, которые вы в конечном итоге создадите, но это отличная возможность протестировать новые стили, и это особенно полезно при разработке дизайна для нескольких браузеров.

Примеры руководств по стилю.

Хотите несколько реальных примеров отличных руководств по стилю? Ты понял:

Код для Америки
мэйлчимп
отдел продаж

Обеспечивая согласованность дизайна, ваше руководство по стилю упрощает расширение веб-сайта и его будущие усовершенствования. По мере того, как стили добавляются и изменяются, этот документ — отличный способ информировать команду и демонстрировать свой проект стиля.