Skip to content

Latest commit

 

History

History
129 lines (87 loc) · 5.46 KB

README-RU.md

File metadata and controls

129 lines (87 loc) · 5.46 KB
Raw

English | Русский

Makeup logo

Build Status Gitter

Что такое Makeup?

Makeup (Мейкап) – инструмент для вёрстки и приятного контроля за качеством вёрстки на веб-проектах.

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

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

Обязательно зайдите на промо-сайт Makeup!

Чем Makeup может быть мне полезен?

Makeup предназначен для:

  • Сравнения вёрстки блоков с исходными дизайн-макетами,
  • Контроля за состояниями блоков (модификации блоков, разный контент),
  • Комфортной изолированной разработки блоков.

Примеры

Посмотреть на фичи Makeup можно на демо-сайте.

Все примеры можно найти в папке demo/: достаточно открыть в браузере один из .html файлов.

Горячие клавиши

Для удобства работы в Makeup есть набор горячих клавиш. Смотрите шпаргалку.

Как начать использовать Makeup?

Экспресс-версия Makeup

Экспресс-версию Makeup можно загрузить почти на любой сайт (кроме тех, где выставлен HTTP заголовок content-security-policy). Для этого скопируйте и выполните строчку кода в консоли Dev Tools вашего браузера:

var s=document.createElement('script');
s.src ="//2gis.github.io/makeup/autoload/script.js";
document.body.appendChild(s)

Быстрый старт

  1. Создайте страницу со всеми ресурсами вашей вёрстки (разметка, стили, изображения):
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Makeup</title>
    <link rel="stylesheet" href="style.css"> <!-- Стили проекта -->
</head>
<body>
    <button class="button">My button</button> <!-- Разметка -->
</body>
</html>
  1. Подключите два файла: скрипт и стили Makeup.
<!DOCTYPE html>
<html>
<head>
    <title>Makeup</title>
    <link rel="stylesheet" href="style.css">

    <script src="makeup.js"></script><!-- Сам Makeup -->
    <link rel="stylesheet" href="makeup.css"> <!-- Стили Makeup -->
</head>
<body>
    <div style="display: none;">
        <button class="button">My button</button>
    </div>
</body>
</html>
  1. Инициализируйте Makeup
Makeup(params, templating);

Смотрите подробное описание формата данных для инициализации.

Разработка

Если вы хотите разрабатывать сам Makeup – это здорово. Чтобы начать, следуйте инструкции:

  1. Убедитесь, что у вас установлены nodejs, npm и gulp.

  2. Форкните этот репозиторий и клонируйте свой форк:

    git clone [email protected]:<your_name>/makeup.git
cd makeup

    Чтобы залить свои изменения в основной репозиторий, создайте pull-request (подробнее в GitHub Flow).

    Вы также можете напрямую клонировать этот репозиторий, но вы не сможете заливать в него изменения (git push) или создавать pull-request'ы.

    git clone [email protected]:2gis/makeup.git
cd makeup

  3. Запустите сборку

    npm i
npm start

Демо будет доступно по адресу localhost:3333/demo.

Лицензия

Makeup опубликован под лицензией Mozilla Public License, version 2.0.

node-makeup

До 23 октября 2015 года под именем «makeup» в npm находился другой проект — «node-makeup». Вы можете получить доступ к проекту «node-makeup» на defunctzombie/node-makeup.