Десять инструментов руководства по стилю жизни для веб-дизайнеров

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

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

Рекомендуемое чтение: как оптимизировать CSS с помощью руководств по стилю кода

В этом посте мы собрали 10 удобных инструментов, которые помогут вам создать собственное руководство по стилю жизни.
1. Стилизуй меня
Этот инструмент очень интересный: просто вставьте ссылку на сайт, который вы хотите проанализировать, и посмотрите, как его руководство по стилю создается одним щелчком мыши. С Stylify Me вы можете быстро получить представление о шаблонах сайта, включая цвета, шрифты, размеры и интервалы. После завершения процесса вы можете скачать руководство по стилю в формате PDF.
2. производитель
Fabricator позволяет вам создавать свой собственный инструментарий пользовательского интерфейса, организовывать систему проектирования и генерировать руководство по стилю из своего кода инструментария. Если вы работаете в команде, вы можете написать документацию в Markdown, чтобы другим разработчикам было легче ее использовать. Это может помочь вам организовать вашу процедуру проектирования / кодирования так, как вам нравится.
3. Frontify
Frontify включает в себя все, от цифровых макетов до каркасных. У них также есть инструмент руководства по стилю, который предлагает чистый минималистичный процесс проектирования без хлопот. Вы можете зарегистрироваться бесплатно и вставить всю необходимую информацию вручную. Процесс должен включать цветовую палитру, выбор шрифта, значки, логотипы, возможно, слоганы или предпочтительную веб-копию.
4. Aigis
С Aigis вы можете создавать руководства по стилю из любых текстовых файлов (например, .css, .scss, .styl, .md). Вы также можете написать документацию в Markdown и настроить тему своего сайта.
5. голограмма
Голограмма была создана Trulia и является отличным решением для создания руководств по стилю. Это драгоценный камень Ruby, который анализирует комментарии в вашем CSS для создания великолепных руководств по стилю. Голограмма имеет систему шаблонов с некоторыми базовыми стилями и навигацией, чтобы сделать ваше руководство по стилю еще проще.
6. Styledown
С помощью Styledown вы можете с легкостью писать руководства по стилю CSS, поскольку это генератор руководств по стилю на основе Markdown. Он будет работать с большинством настроек веб-разработки, поскольку не зависит от платформы. Это требует очень мало, чтобы запустить его. Кроме того, комментарии, которые вы должны добавить в свой CSS, очень минимальны. Вы можете создать свою документацию CSS либо в виде встроенных комментариев CSS, либо в виде отдельный файл Markdown,
7. KSS
KSS (Knyle Style Sheets) – это в первую очередь спецификация документации и формат руководства по стилю, который имеет собственный синтаксис комментариев. KSS также включает в себя Рубиновая библиотека это анализирует файлы .sass, .scss и .css, документированные с рекомендациями KSS, в аккуратное руководство по стилю. KSS для более опытных пользователей и профессиональных команд, а создание руководства по стилю с этим требуется знание кодирования.
8. SC5 Style Guide Generator
С помощью SC5 Style Guide Generator вы можете создавать и редактировать руководства по стилям прямо в браузере. Он основан на KSS с некоторыми интересными функциями, такими как пользовательский интерфейс на базе AngularJS, который помогает вам просматривать, искать и тестировать ваши стили. SC5 использует ту же запись документа, что и KSS. Он поддерживает таблицы стилей SASS, LESS, PostCSS и чистый CSS.
9. Styledocco
StyleDocco – это удобное приложение Node.js, которое создает руководства по стилям из ваших таблиц стилей. Вы можете устанавливать это с нпм. В сгенерированном руководстве по стилю StyleDocco показывает предварительный просмотр с примененными вами стилями и пример кода HTML.

На домашней странице StyleDocco вы можете найти два примера руководства по стилю: генерируется из таблицы стилей по умолчанию, и еще один генерируется с сайта Bootstrap, Примеры также могут помочь вам подобрать синтаксис документации, используемый SytleDocco.
10. Pattern Lab
Pattern Lab – это набор инструментов, которые помогут вам создать модульную систему проектирования. Pattern Lab – это специальный генератор статического сайта, который объединяет все элементы стиля на сайте и формирует из них шаблоны и страницы. Он может служить в качестве библиотеки шаблонов вашего проекта и руководства по стилю внешнего интерфейса. Pattern Lab позволяет вам видеть ваши компоненты стиля одновременно абстрактно и в контексте.

Теперь прочитайте: почему разработчики не должны пропускать документацию