Инструмент для приятного контроля за качеством вёрстки на веб-проектах

Сравните вёрстку с дизайном

  • 1 — дизайн
  • 2 — вёрстка
  • 3 — сумма
  • 4 — разница

Как сравнить вёрстку с исходным макетом? Просто — наложить полупрозрачную картинку на настоящую вёрстку. Makeup делает это правильно! Все несоответствия видны сразу, если включить режим с инвертированным изображением [4].

Переключайте режимы отображения при помощи клавиатуры.

Вы поладите с Makeup,
если ваша вёрстка основана на независимых блоках,
а вам небезразлична стабильность и надежность проекта

Добавьте состояния блока

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

  • Дизайн

    Дизайн

    Добавьте в Makeup состояния, описанные в дизайне.

  • Экстрим

    Экстрим

    Проверьте блок на «экстремальных данных» — большие тексты, длинные слова.

  • Баги

    Баги

    Когда возникает баг, добавьте состояния блока, на которых он воспроизводился.

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

Интегрируйте!

  • Любое окружение

    Работайте с любыми шаблонизаторами и фреймворками.

  • Автоматизация

    Автоматизируйте сбор конфигурационного файла.

  • Документация

    Храните ссылки на документацию под рукой.

В двух словах

Makeup — библиотека на JavaScript, предоставляющая графический интерфейс для просмотра независимых блоков в различных состояниях, заранее описанных в конфигурационном файле.

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

Для инициализации библиотеке понадобятся:

  • HTML
    Ресурсы приложения (разметка, стили)
  • PNG
    Изображения
    из исходного
    дизайна
  • JS
    Конфигурационный файл