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

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

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

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

1. Стилизовать меня

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

2. Изготовитель

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

3. Frontify

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

4. Эгида

С Aigis, Вы можете создавать руководства по стилю из любых текстовых файлов (например,. .CSS, .СКС, .Styl, .Мэриленд). Вы также можете написать документацию в Markdown и настроить тему своего сайта..

5. Голограмма

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

6. Стиль

С Styledown, Вы можете с легкостью писать руководства по стилю CSS, так как это Генератор руководств по стилю на основе уценки. Он будет работать с большинством настроек веб-разработки, поскольку не зависит от платформы. Это требует очень мало, чтобы запустить его. Кроме того, комментарии, которые вы должны добавить в свой CSS, очень минимальны. Вы можете создать свою документацию CSS либо в виде встроенных комментариев CSS, либо в виде отдельного файла Markdown..

7. КСС

KSS (таблицы стилей Knyle) это в первую очередь спецификация документации и формат руководства по стилю, который имеет свой собственный синтаксис комментариев. KSS также включает в себя библиотеку Ruby, которая анализирует .пререкаться, .СКС, а также .CSS файлы, документированные с руководящими принципами KSS в аккуратное руководство по стилю. KSS предназначен для более опытных пользователей и профессиональных команд, так как для создания руководства по стилю требуются знания кодирования.

8. SC5 Style Guide Генератор

С SC5 Style Guide Generator Вы можете создавать и редактировать руководства по стилю прямо в вашем браузере. это на основе КСС с некоторыми интересными функциями, такими как пользовательский интерфейс на базе AngularJS, который помогает вам просматривать, искать и тестировать ваши стили. SC5 использует ту же запись документа, что и KSS. Он поддерживает таблицы стилей SASS, LESS, PostCSS и чистый CSS.

9. Styledocco

StyleDocco удобное приложение Node.js, которое создает руководства по стилю из ваших таблиц стилей. Вы можете установить его с помощью npm. В сгенерированном руководстве по стилю StyleDocco показывает предварительный просмотр со стилями, которые вы применили, и пример кода HTML..

На домашней странице StyleDocco вы можете найти два примера руководства по стилю: один сгенерирован из таблицы стилей по умолчанию, а другой - с сайта Bootstrap. Примеры могут также помочь вам подобрать синтаксис документации, используемый SytleDocco.

10. Pattern Lab

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