Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Подробный обзор инструментов руководства по стилю жизни

  1. Об авторе Страстный Front-end разработчик, евангелист и специалист по автоматизации. Любит говорить...
  2. Инструменты CSS документации
  3. Альтернативы КСС
  4. Статические генераторы стилей
  5. Pattern Lab
  6. Другие генераторы статических сайтов
  7. LivingStyleGuide Gem
  8. Rizzo
  9. SourceJS
  10. Компоненты-ориентированные
  11. Стартовые комплекты
  12. Подводя итоги
  13. Начиная с малого
  14. Более сложные библиотеки компонентов
  15. Гибкие решения для глубокой интеграции
  16. Будущее гидов по стилю

Об авторе

Страстный Front-end разработчик, евангелист и специалист по автоматизации. Любит говорить о технологиях и создавать интересные вещи для веб-сообщества. Ранее работал ... Подробнее о Роберте ...

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

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

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

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

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

Дальнейшее чтение на SmashingMag:

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

Инструменты CSS документации

Первыми игроками в этой области стали инструменты разбора документации CSS . Идея включения описаний компонентов в исходный код стиля впервые пришла от веб-дизайнеров. Сочетание творческого подхода к разработке руководств по стилю с практиками веб-внедрения привело к разработке KSS ,

Похожий на JSDoc В KSS компоненты CSS описаны прямо в исходном коде как комментарии.

// Кнопка, подходящая для передачи кому-то звезды. // //: hover - Тонкая подсветка при наведении. // .star-данное - выделение. // .star-данное: hover - Тонкая подсветка при наведении. // .disabled - затемняет кнопку. // // Стилгуд 2.1.3. a.button.star {... & .star-данное {...} & .disabled {...}}

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

Одностраничная документация, сгенерированная KSS. ( Большой предварительный просмотр )

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

В настоящее время KSS является только решением для документации, а инструмент синтаксического анализа не обновляется. Хотя это реализации, такие как КСС-узел все еще улучшаются с пользовательскими полями документации и улучшенной поддержкой шаблонов.

Альтернативы КСС

Начиная с оригинального KSS, было выпущено много подобных инструментов, которые делали то же самое. Одним из наиболее успешных является SC5 Style Guide Generator , который основан на KSS. В дополнение к инкапсулированным (с использованием Shadow DOM) визуализированным предварительным просмотрам компонентов, инструмент также позволяет редактировать стили Sass или LESS в браузере. Также можно определить директивы Angular.js или веб-компоненты в качестве примера разметки в комментариях CSS, который затем будет преобразован в полностью работающий компонент.

К сожалению, большинство инструментов документации CSS копируют функциональность друг друга, не вводя новых возможностей (делая описание каждого из них несколько избыточным), но доступные включают в себя: Sassdown ; StyleDocco ; Kalei Styleguide (только на стороне клиента); голограмма ; а также Styledown ,

Один инструмент, однако, является более отличительным. DSS является единственным автономным анализатором документации CSS, который создает JSON для последующего шаблонирования. DSS основан на Node.js с поддержкой всех современных препроцессоров. По сравнению с KSS, можно интегрировать DSS в любой другой инструмент или среду, как это сделал первоначальный автор с Плагин DSS Grunt ,

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

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

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

Статические генераторы стилей

Наиболее простой пример статического генератора направляющих стилей Pattern Primer , Он просто объединяет список файлов HTML в одностраничный документ, который можно дополнить краткими текстовыми описаниями и примерами кода.

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

Pattern Lab

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

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

Pattern Lab в действии. ( Большой предварительный просмотр )

Pattern Lab устанавливает каталог _patterns с подпапками для каждого компонента в соответствии с соглашением об именах. Каждая папка содержит набор логических шаблонов усов с разметкой HTML.

Структура папок и Pattern Lab генерирует навигацию. ( Большой предварительный просмотр )

Данные для шаблонов определяются на глобальном уровне или могут быть установлены локально рядом с самой разметкой:

pages / article.mustache pages / article.json

Осталось только связать стили проекта в общий шаблон страницы и запустить конструктор Pattern Lab. Просмотрите полученную демонстрационную страницу сгенерированной библиотеки шаблонов.

Другие генераторы статических сайтов

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

производитель   сопоставляет файлы HTML и Markdown, предоставляя вам большую гибкость в структурировании документации компонентов

Совместимая с Fabricator структура папок и созданный скриншот страницы. ( Большой предварительный просмотр )

Pattern Lab позволяет вам определять данные шаблона рядом с источниками Усов; с помощью Fabricator можно определять файлы Markdown с текстовыми описаниями рядом с источником HTML. Обработка документации выполняется с помощью задачи сборки Gulp, которая также включает в себя живую перезагрузку для упрощения разработки. Вот пример вывода генерируется Fabricator.

LivingStyleGuide Gem

Еще один инструмент, который стоит упомянуть, это LivingStyleGuide Gem , основанный на Sass и Markdown.

Чтобы определить разметку, вы можете выбрать между HTML и Haml. Элементы пользовательского интерфейса описываются с использованием Markdown с пользовательским синтаксисом для импорта и определения данных.

@haml @ полная ширина ***. концептуальная страница *** ***. концепт-страница - контейнер ***% h1 ***. концепт-страница - заголовок *** концепт ***. концепт -page - раздел ***

Вот список демонстрационных компонентов, используемых в качестве входных данных для LivingStyleGuide Gem, и в результате одностраничный документ ,

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

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

На данный момент есть только два хороших примера платформ динамического руководства по стилю: Rizzo ; а также SourceJS ,

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

Rizzo

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

К сожалению, Rizzo очень самоуверен и пока не подходит для повторного использования в других приложениях. Тем не менее, я определенно предлагаю вам прочитать больше о идеи, стоящие за этим на инженерном блоге Lonely Planet.

SourceJS

По сравнению с Риццо, SourceJS является масштабируемым решением с открытым исходным кодом. Динамическая среда приложения позволяет вам настраивать любую пользовательскую маршрутизацию и генерацию документации на основе API на лету. Это дает больше свободы для интеграции с основными источниками приложений, чем с Rizzo.

Исходный код SourceJS позволяет использовать файлы Markdown и специальные страницы шаблонов для описания компонентов пользовательского интерфейса. С официальными плагинами также можно использовать CSS документация а также нефрит шаблоны на основе Выберите предпочитаемый синтаксис или объедините все сразу (см. Примеры ).


SourceJS вводное видео

Ядро приложения является высокомодульным и содержит только самые распространенные функции и API, используемые для разработка пользовательских плагинов , Платформа построена с использованием Node.js, но не дает какого-либо мнения о технологиях, которые вы, возможно, захотите интегрировать, таких как различные языки шаблонов и препроцессоры CSS.

Компоненты-ориентированные

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

Такой подход позволяет объединять несколько наборов компонентов в одной среде даже для разных веб-проектов. Просто поместите основное приложение рядом с приложением SourceJS и свяжите стили CSS, JavaScript и шаблоны на своих страницах документации.

Если кодовая база проекта уже ориентирована на отдельные компоненты пользовательского интерфейса, свяжите их папки с каталогом спецификаций SourceJS:

sourcejs / specs / menu-component / menu.css menu.js menu.html readme.md [index.src]

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

Заказать консультацию с авторами платформы SourceJS, чтобы посмотреть, как она может быть интегрирована с вашей базой кода, или использовать проблемы GitHub и Gitter чат задавать вопросы.

Стартовые комплекты

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

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

Подводя итоги

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

Начиная с малого

Для простых CSS-фреймворков и небольших веб-проектов, которые не требуют долгосрочной поддержки, я бы предложил использовать SC5 Style Guide Generator или же DSS , Оба они действительно просты в настройке и освоении.

Для простых CSS-фреймворков и небольших веб-проектов, которые не требуют долгосрочной поддержки, я бы предложил использовать   SC5 Style Guide Generator   или же   DSS   ,  Оба они действительно просты в настройке и освоении

Простая библиотека компонентов CSS от Heroku. ( Большой предварительный просмотр )

Более сложные библиотеки компонентов

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

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

Гибкие решения для глубокой интеграции

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

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

Будущее гидов по стилю

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

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

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

Использование плагинов, таких как   Комментарии   или же   толпы голос   Команды могут общаться между различными отделами в рамках руководства по стилю, оставляя свои замечания и отзывы там, где компоненты разрабатываются, тестируются и обслуживаются

SourceJS плагин для комментирования предоставленных примеров пользовательского интерфейса. ( Большой предварительный просмотр )

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

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

Если вы верите в будущее руководств по стилю и готовы поддержать это движение, мы будем рады приветствовать вас в сообществе SourceJS.

Ресурсы

Похожие

Обзор BlackBerry Classic: клавиатура является ключом к этому телефону
... поразит правильную цель. Этого можно ожидать, учитывая наследие BlackBerry. Новый, старый BlackBerry Classic. Изображение: BlackBerry При каждом нажатии клавиши имеется удовлетворительный уровень перемещения, при этом это не слишком тяжелая работа, и она, безусловно, превосходит, например,
У вас есть Raspberry Pi и вы готовы сделать домашний проект своими руками, верно? Как хорошо, если вы узнаете...
У вас есть Raspberry Pi и вы готовы сделать домашний проект своими руками, верно? Как хорошо, если вы узнаете о проектах домашней автоматизации IoT (Internet of Things) для управления домашними вещами, такими как CCTV, Fan и Lights? Что ж, IoT - не такой сложный проект, как общее восприятие людей. Фактически, он обеспечивает быстрый и простой способ установления связи между различными устройствами в сети. Сегодня я покажу вам, как вы можете создать проект домашней автоматизации Raspberry
Обзор Samsung Galaxy J6: наш обзор
В последние годы Samsung завоевывает долю рынка многими китайскими производителями, которые развиваются на международном уровне. Во втором квартале 2018 года он занимал лишь 20,9% рынка, что на 10,4% меньше, чем в 2017 году. И наоборот, продажи Huawei выросли с 38,5 млн. 54,2 миллиона единиц, что составляет долю рынка 15,8%. Поэтому коммерческий успех Galaxy J6 (2018) является серьезной проблемой, которая позволит Samsung укрепить свои лидирующие позиции. Но для этого необходимо, чтобы
Как заменить Windows XP на Linux бесплатно
Пользователь XP, я говорю с вами. В апреле 2014 года ваша любимая операционная система остановился будучи официально поддерживаемым Microsoft. Теперь нет причин для паники, но это хорошая возможность начать рассматривать альтернативы. Не вдаваясь в подробности, бесплатный и захватывающий вариант - попробовать Linux. Сегодня мы продемонстрируем, как выполнить двойную загрузку существующей установки Windows
Обзор Microsoft Lumia 550: бюджетная Lumia, которая не обеспечивает
Еще в октябре Microsoft провела свое мероприятие Devices, запуск всех своих продуктов с громкими именами, включая Lumia 950, 950 XL, Surface Pro 4, Surface Book и Band 2 , Возможно, вы моргнули и пропустили это, но они также объявили о Lumia 550, бюджетном предложении. В Lumia 550 нет ничего невероятного. В конце концов, это бюджетное предложение. Устройство
Топ-3 серверов «Hosted Exchange» для вашего бизнеса (Microsoft / Outlook)
... пользуемых почтовых клиентов для предприятий и организаций. Все большее число организаций предпочитают использовать Microsoft Outlook Exchange в качестве решения для электронной почты. И популярность Microsoft Outlook связана не только с узнаваемостью бренда. Надежность сервиса, а также множество интегрированных частей делает его идеальным для бизнеса. Почтовый клиент Outlook предоставляется Microsoft на сервере Microsoft Exchange. Чтобы использовать Microsoft Outlook Exchange, организации
Спортивный веб дизайн | Фэнтези Спорт Компания Веб-Дизайн
Профессиональные виды спорта Веб-дизайн Услуги Обзор DreamCo Design - профессиональная компания по спортивному веб-дизайну, которая разрабатывает, разрабатывает и продает веб-сайты для спортивной индустрии. Мы создали некоторые из самых популярных веб-сайтов, посвященных фэнтези-спорту, в Интернете, и на них также ссылаются спортсмены, спортивные команды, лиги и другие представители индустрии. Наша команда веб-дизайнеров , занимающаяся
Как разблокировать альтернативу чату
Альтернатива чата является одной из самых популярных случайный чат сайты в интернете. Однако, если вы нарушите правила и условия сайта, вы можете немедленно получить бан с сайта. Мы
Приложение для веб-тестирования
... генераторы динамических страниц, CGI-скрипты и многое другое. Есть также много «клиентов», чтобы угодить. Браузеры бывают разных форм и размеров. Помимо ряда компаний, предлагающих свои браузеры, такие как Apple Safari , Mozilla Firefox , а также Гугл Хром Существуют также их мобильные версии, не говоря уже о различных
Создание простого AI Chatbot с помощью Web Speech API и Node.js
Использование голосовых команд стало вездесущим в наши дни, поскольку все больше пользователей мобильных телефонов используют голосовых помощников, таких как Siri и Cortana, а устройства, такие как Amazon Echo и Google Home, вторгаются в наши жилые комнаты. Эти системы построены с программным обеспечением распознавания речи, которое позволяет их пользователям давать голосовые команды. Теперь наши веб-браузеры познакомятся с Web Speech API, который позволяет пользователям интегрировать
Создание чата на Facebook с Node и Heroku
... помощью ботов владельцы приложений могут лучше взаимодействовать со своими пользователями, предоставляя персонализированное и интерактивное общение, которое может масштабироваться для масс. С момента запуска компании и владельцы приложений проявили большой интерес к чат-ботам. Всего через три месяца после объявления было 11 000 ботов построен на платформе.

Комментарии

Является ли отпечаток пальца более безопасным, чем пароль?
Является ли отпечаток пальца более безопасным, чем пароль? Отпечатки пальцев более и менее безопасны, чем коды доступа. Отпечаток пальца более безопасен, так как угадать его практически невозможно. Это может быть менее безопасно, потому что, если кто-то украдет это однажды, они украдут это для жизни. Это также зависит от того, как хранится отпечаток пальца. Если шаблон большой (например, более длинный, чем любой пароль, который вы когда-либо захотите запомнить),
Что вы получите в конце этого проекта автоматизации Pi?
Что вы получите в конце этого проекта автоматизации Pi? Используя Raspberry Pi, веб-сервер, интернет и другое оборудование, вы будете управлять светом и вентиляторами в своей гостиной. Вы также сможете контролировать работу камеры видеонаблюдения, которую вы разместили перед своей главной дверью. Все это можно сделать удаленно, не приближаясь к устройствам или оставаясь рядом с разъемами для включения / выключения переключателей. В восторге? Тогда давайте перейдем
Читайте наш полный обзор Mercury Browser Pro Глядя на Ditch Mobile Safari?
Что вы получите в конце этого проекта автоматизации Pi? Используя Raspberry Pi, веб-сервер, интернет и другое оборудование, вы будете управлять светом и вентиляторами в своей гостиной. Вы также сможете контролировать работу камеры видеонаблюдения, которую вы разместили перед своей главной дверью. Все это можно сделать удаленно, не приближаясь к устройствам или оставаясь рядом с разъемами для включения / выключения переключателей. В восторге? Тогда давайте перейдем

У вас есть Raspberry Pi и вы готовы сделать домашний проект своими руками, верно?
Как хорошо, если вы узнаете о проектах домашней автоматизации IoT (Internet of Things) для управления домашними вещами, такими как CCTV, Fan и Lights?
Является ли отпечаток пальца более безопасным, чем пароль?
Что вы получите в конце этого проекта автоматизации Pi?
В восторге?
Что вы получите в конце этого проекта автоматизации Pi?
В восторге?