JavaScript tool for comfortable manual testing of markup
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo Merge pull request #66 from 2gis/change/params-format Sep 19, 2015
dist Merge pull request #66 from 2gis/change/params-format Sep 19, 2015
docs
source Merge pull request #66 from 2gis/change/params-format Sep 19, 2015
tasks add/auto-full[#51] May 22, 2015
.gitignore
.jshintrc Trash Jul 22, 2014
.travis.yml add/travis#33 May 19, 2015
LICENSE Update license Mar 26, 2015
README-RU.md
README.md improve style in documentation. Apr 9, 2017
config.js globals for test & debug Sep 26, 2014
gulpfile.js add/auto-full[#51] May 22, 2015
package.json fix badges in readme, add contributors section Oct 26, 2015

README.md

English | Русский

Makeup logo

Build Status Gitter

What Is Makeup?

Makeup is a tool for development and comfortable quality assurance of markup on web projects. You'll certainly find it useful if your design is based on independent blocks and you prioritize stability and reliability.

Makeup is a JavaScript library. It provides visual interface for isolated development and quick manual regression testing of web pages, built from independent blocks.

Check out the interactive Makeup promotion site!

Why Should I Use Makeup?

Makeup allows you to:

  • Compare page design with the sample layout,
  • Monitor blocks for modifications and mismatching content,
  • Develop isolated blocks with ease.

Examples

Features of Makeup can be seen on the Makeup demo page.

Examples can be found in the demo/ subfolder. Just open any .html file in your browser.

Keyboard Shortcuts

Makeup has convenient keyboard shortcuts – see the cheatsheet.

How Do I Use Makeup?

Makeup Express

Express version of Makeup can be launched on any website except those with HTTP header content-security-policy. To use it, run the following script from the developer tools console of your browser:

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

Quick Start With Makeup

  1. Make a web page with all resourses of your page's layout (markup, styles and images):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Makeup</title>
        <link rel="stylesheet" href="style.css"> <!-- project styles -->
    </head>
    <body>
        <button class="button">My button</button> <!-- markup -->
    </body>
    </html>
  2. Link the Makeup script and styles files to your page:

     <!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 styles -->
     </head>
     <body>
         <div style="display: none;">
             <button class="button">My button</button>
         </div>
     </body>
     </html>
  3. Initialize the Makeup

    Makeup(params, templating);

    See the full reference on initialization data format.

Development

You are welcome to take part in the development of Makeup. To start working, follow the instruction:

  1. Make sure that you have nodejs, npm and gulp installed.

  2. Fork this repository and clone your fork:

    git clone git@github.com:<your_name>/makeup.git
    cd makeup

    To commit your contribution, make a pull request (use the GitHub Flow).

    You can also clone this repository directly, but then you won't be able to push to it or make pull requests:

    git clone git@github.com:2gis/makeup.git
    cd makeup
  3. Launch Makeup with

    npm i
    npm start

    Demo page will then be available at http://localhost:3333/demo.

License

Makeup is published under the Mozilla Public License, version 2.0.

node-makeup

A project named "node-makeup" had been published in npm under the name "makeup" till 23.10.2015. You can find it at defunctzombie/node-makeup.