<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>git-flow cheatsheet</title>
    <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">


    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.scrollorama.js"></script>

    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-33766650-1']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>
</head>
<body>
<p id="console"></p>

<div id="banner"><a href="">Fork me on GitHub</a></div>

<header>
    <div class="scrollblock">
        <h1 id="title">git-flow cheatsheet</h1>

        <p id="author">
            created by <a href="http://twitter.com/0r1g4m14dd1c7">Daniel Kummer</a>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="0r1g4m14dd1c7" data-size="large">Tweet</a>
            <script>!function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "//platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, "script", "twitter-wjs");</script>
        </p>

        <p id="desc">efficient branching using git-flow by <a href="http://nvie.com/">Vincent Driessen</a></p>

        <!-- <p id="download">
            <span class="accent">&bigstar;</span>
            <a href="files/git-flow-cheatsheet.pdf"
               onClick="recordOutboundLink(this, 'Cheat Sheet', 'git-flow-cheatsheet');return false;" class="download">Download
                as pdf</a>
            <span class="accent">&bigstar;</span>
        </p>-->
    </div>
</header>


<div id="main">

    <div class="scrollblock">
        <h2>About</h2>

        <p>
            git-flow are a set of git extensions to provide high-level repository operations for Vincent
            Driessen's branching model.
            <small><a href="http://nvie.com/posts/a-successful-git-branching-model/">more</a></small>
        </p>
        <p class="divider">&#9733; &#9733; &#9733;</p>

        <p>This cheatsheet shows the basic usage and effect of git-flow operations</p>

        <p class="divider">&#9733; &#9733; &#9733;</p>
    </div>

    <div class="scrollblock">
            <h2>Basic tips</h2>
            <ul>
                <li>git flow provides excellent command line help and output. Read it carefully to see what's happening...</li>
            </ul>

            <p class="divider">&#9733; &#9733; &#9733;</p>
        </div>

    <div class="scrollblock">
        <h2>Initialize</h2>

        <div class="col-1">
            <h3>git flow init</h3>

            <p>Start using git-flow by initializing it inside a git repository</p>
            <blockquote>
                <code>
                    git flow init
                </code>
            </blockquote>
            <p>
                You'll have to answer a few questions regarding the naming conventions for your branches.<br/>
                I strongly recommend using the default values.
            </p>

        </div>
        <div class="col-2">
            <div id="init-img"></div>
            <div id="blue-line-img"></div>
        </div>
    </div>

    <div class="scrollblock">
        <h2>Features</h2>

        <div class="col-1">
            <h3>Start a new feature</h3>

            <p>
                Development of new features starting from the develop branch.
            </p>

            <p>Start developing a new feature with</p>
            <blockquote>
                <code>
                    git-flow feature start MYFEATURE
                </code>
            </blockquote>
        </div>
        <div class="col-2">
            <div id="feature-start-img"></div>
            <div id="violet-line-img"></div>
        </div>
    </div>

    <div class="scrollblock">
        <div class="col-1">
            <h3>Finish up a feature</h3>

            <p>
                Finish the development of a feature.
                This action performs the following
            </p>
            <ul>
                <li>Merged MYFEATURE into develop</li>
                <li>Removes the feature branch</li>
                <li>Switches back to develop branch</li>
            </ul>

            <blockquote>
                <code>
                    git-flow feature finish MYFEATURE
                </code>
            </blockquote>
        </div>
        <div class="col-2">
            <div id="feature-finish-img"></div>
        </div>
    </div>

    <div class="scrollblock">
        <div class="col-1">
            <h3>Publish a feature</h3>

            <p>
                Publish a feature to the remote server so it can be used by other users.
            </p>

            <blockquote>
                <code>
                    git-flow feature publish MYFEATURE
                </code>
            </blockquote>
        </div>
        <div class="col-2">
            <div id="feature-publish-img"></div>
        </div>
    </div>

    <div class="scrollblock">
            <div class="col-1">
                <h3>Getting a published feature</h3>

                <p>
                    Getting a published feature from the remote server and tracking remote changes.
                </p>

                <blockquote>
                    <code>
                        git-flow feature pull MYFEATURE
                    </code>
                </blockquote>
            </div>
            <div class="col-2">
                <div id="feature-publish-img"></div>
            </div>
        </div>


    <div class="scrollblock">
        <h2>git-flow release</h2>
    </div>
    <div class="scrollblock">
        <h2>git-flow hotfix</h2>
    </div>

</div>

<script>
    $(document).ready(function () {
        var scrollorama = $.scrollorama({ blocks:'.scrollblock' });

        var colorClassMatcher = function (index, classname) {
            var matches = classname.match(/color\d+/g) || [];
            return (matches.join(' '));
        };

        // assign function to add behavior for onBlockChange event
        scrollorama.onBlockChange(function () {
            var i = scrollorama.blockIndex;
            $('#console').css('display', 'block').text('onBlockChange | blockIndex:' + i + ' | current block: ' + scrollorama.settings.blocks.eq(i).attr('id'));
            $('body').removeClass(colorClassMatcher);
            $('body').addClass('color' + i);
        });

        /*
         /*
         scrollorama.animate('.fly-in', { delay:300, duration:200, property:'left', start:-1400, end:0 });
         scrollorama.animate('#zoom-in', { delay:200, duration:600, property:'zoom', start:0 });
         // animate some examples
         scrollorama.animate('#unpin', { duration:500, property:'padding-top', start:400, pin:true });
         scrollorama.animate('#fade-in', { delay:400, duration:300, property:'opacity', start:0 });

         scrollorama.animate('#rotate-in', { duration:800, property:'rotate', start:720 });
         scrollorama.animate('#any', { delay:700, duration:200, property:'opacity', start:0 });
         scrollorama.animate('#any', { delay:800, duration:200, property:'letter-spacing', start:18 });


         // animate the parallaxing
         scrollorama.animate('#parallax2', { delay:400, duration:600, property:'top', start:800, end:-800 });
         scrollorama.animate('#parallax3', { delay:200, duration:1200, property:'top', start:500, end:-500 });*/

    });
</script>


</body>
</html>