Экспресс-версию Makeup можно загрузить почти на любой сайт (кроме тех, где выставлен HTTP заголовок content-security-policy). Для этого скопируйте и выполните строчку кода в консоли Dev Tools вашего браузера:
var s=document;ssrc ="//2gis.github.io/makeup/autoload/script.js";documentbody
Makeup
Makeup – инструмент для вёрстки и приятного контроля за качеством вёрстки на веб-проектах.
Вы поладите с Makeup, если ваша верстка основана на независимых блоках, а вам важна стабильность и надежность проекта.
Описание
Если говорить формально, Makeup – это js-библиотека, которая предоставляет визуальный интерфейс для изолированной разработки и быстрого ручного регрессионого тестирования вёрстки, основанной на абсолютно-независимых блоках.
Makeup предназначен
- Для сравнения вёрстки блоков с исходными дизайн-макетами.
- Для контроля за состояниями блоков (модификации блоков, разный контент).
- Для комфортной изолированной разработки блоков.
Быстрый старт
Создайте страницу со всеми ресурсами вашей вёрстки (разметка, стили, изображения):
Makeup <!-- Стили проекта --> My button <!-- Разметка -->
Подключите два файла: скрипт и стили Makeup.
Makeup <!-- Сам Мейкап --> <!-- Стили Мейкапа --> My button
Инициализируйте Мейкап
;
где params - опциональный объект параметров, включая список блоков. Если объект не передан, все параметры берутся со значениями по-умолчанию, а список блоков генерируется из имеющегося в текущий момент DOM-дерева; templating - опциональная функция, которая по имени блока (и параметрам этого блока) должна возвращать html этого блока:
{ return html;};
где ctx - объект, идентифицирующий выбранный в списке блок и его параметры; return - html код выбранного блока. Если функция не передана, используется встроенная функция, которая просто ищет в имеющемся DOM-дереве $('.' + ctx.name) и берёт от него outerHTML.
Формат данных для инициализации
Примеры
Все примеры можно найти в папке demo: достаточно открыть в браузере один из html файлов.
Сборка
Если вы хотите разрабатывать сам Мейкап, то... Для сборки должны быть установлены nodejs
, npm
и gulp
.
-
Склонируйте репозиторий
git clone git@github.com:2gis/makeup.gitcd makeup -
Запустите сборку
npm inpm start
Демо будет доступно по адресу localhost:3333/demo.
Горячие клавиши в интерфейсе Makeup
До 23 октября 2015 года под именем «makeup» в npm находился другой проект — «node-makeup». Вы можете получить доступ к проекту «node-makeup» в гите.
Another project ("node-makeup") has been published in npm with name "makeup" till 23.10.2015. You can find previous project in github with name "node-makeup".