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

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

Совсем недавно увидел свет его новый проект Style Guide Guide. Пока проект находится на стадии активной разработки, но он уже имеет законченную идею. И в основе его лежит концепция создания стайл-гайда для фронтенда независимого от технологии.

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

Style Guide Guide построен с использованием статического генератора сайтов Jekyll, который хорошо подходит для управления содержанием стайл-гайда. Инструмент может брать и отображать компоненты из любого места, но в первую очередь он тесно связан и изначально настроен на взаимодействие с PatternLab. В скором времени Бред обещает опубликовать пост в своем блоге с более детальным описанием процесса работы с инструментом.

Но, если вам не терпиться попробовать инструмент уже сейчас, то начать довольно просто:

  1. Загрузите или клонируйте файлы  хранилища на Github.
  2. В командной строке переместитесь в корневой каталог проекта и выполните команду jekyll serve. Она генерирует статический сайт и будет смотреть за изменениями
  3. Откройте в браузере http://127.0.0.1:4000/, чтобы увидеть шаблон сатйл-гайда.

А дальше дело за вами. Вы можете настроить стили гайда так, как нужно вам и перенести туда примеры ваших компонентов и их описание.

Как я писал выше, Бред обещает написать о том как работать с инструментом более детально, а пока вы сами можете «пощупать» его и понят, подойдет ли он именно вам.

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

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