Опубликовано автор в категориях Верстальщику.

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

Инструменты

Если вы не знаете с чего начать, но хотите писать фронтенд по фен-шуй, со стайл-гайдами, то начните с очень хорошего ресурса http://styleguides.io. Данный ресурс содержит очень большую коллекцию материалов по стайл-гайд ориентированной разработке фронтенда: свежие статьи, книги, подкасты, инструменты и примеры. Также есть неплохие подборки на Гитхабе, как вариант https://github.com/davidhund/styleguide-generators — здесь собраны генераторы гайдов для разных языков. Это не совсем то что нужно, но, возможно, вы найдете что-то для себя.

Далее, я хотел бы рассмотреть несколько примеров генераторов стайл-гайдов. Пойдем от простого к сложному.

sc5

Стайл-гайд генератор основанный на KSS, расширен некоторыми очень полезными функциями, с отличным интерфейсом, совместим с AngularJS. Он поддерживает стили SASS, LESS, PostCSS, а также ванильный CSS. Его основным минусом можно считать то, что он позволяет строить документацию только на описаниях внутри файлов стилей.

Следующие пару примеров устраняют этот недостаток.

Sourcejs

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

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

PatternLab

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

Изначально создавался для реализации основанных на шаблонах пользовательских интерфейсах, придерживаясь методологии Atomic design. Но по сути, является инструментом, который можно использовать в независимости от методологий и технологий.

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

Особенности
  • Существует в версиях для Node и PHP
  • Позволяет включать одни шаблоны в другие и формировать компоненты
  • Динамические данные для контента (используется как JSON, так и YML)
  • Не зависит от каких-либо конкретных инструментов
  • Не смотря на то, что изначально сконфигурирован по принципу Atomic Design, может использоваться с любой методологией
  • Позволяет документировать паттерны и создавать аннотации к ним
  • Содержит готовые наборы стартовых паттернов: Bootstrap, Foundation или Material Design
  • Можно расширить с помощью плагинов

Для более детального ознакомления я рекомендовал бы вам ознакомиться со статьей Making And Maintaining Atomic Design Systems With Pattern Lab 2.

Помимо универсальных решений, также можно найти специфические стайл-гайд генераторы. И вы, конечно же сочтете меня не современным, если я не скажу про React 🙂

React Styleguide Generator

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


  import React from 'react'
  import Button from './Button'

  export default class extends React.Component {
	static styleguide = {
		index: '1.1',
		category: 'Elements',
		title: 'Button',
		description: 'You can use **Markdown** within this `description` field.',
		code: `<Button size='small|large' onClick={Function}>Cool Button</Button>`,
		className: 'apply the css class'
	}
	onClick () {
		alert('Alo!')
	}
	render () {
		return (
			<Button size='large' onClick={this.onClick}>Cool Button</Button>
		)
	}
  }
  

А что, если не использовать готовый инструмент?

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

Здесь мы рассмотрим самое простое решение, которое во многом похоже на SC5, но будет сделано вами и для вас.

  1. Для документирования ваших сталей вы можете использовать kss-node
  2. Далее желательно иметь шаблонизатор для HTML (Mustache, Twig, Pug…). Какой выбрать — решать вам
  3. Пре- и пост-процессоры для CSS: — SASS (олдскул), лучше PostCSS
  4. Пишем современный JavaScript: Babel + Browserify || Webpack — сможете писать на ES6, бандлить и транспайлить код.
  5. Обязательно использовать линтеры для проверки кода
    1. EslintStandardjs = «no config» ESLint
    2. Stylelint (о том Как линтовать ваш Sass/CSS правильно с помощью Stylelint).
  6. Ну и конечно все это нужно собирать и генерировать гайды: Gulp, Grunt, Brunch или опять же Webpack

После того как вы все это настроите и отладите вы должны получить что-то вроде этого проекта https://github.com/cehfisher/a11y-style-guide.

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

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

3 комментария к записи “Фронтенд по фэн-шуй. Часть 2”

    • Hiway

      Андрей Спасибо за комментарий. http://atomicdocs.io/ вдохновлен PatternLab, но ограничен PHP, поэтому в обзоре предпочтение отдано именно PatternLab. https://github.com/trulia/hologram — требует Ruby. Сегодня, все больше и больше для фронтенда хочеться использовать NodeJS. Но, в любом случае, оба инструмента имеют место быть.

      Ответить

Оставить комментарий

  • (не будет показан)