<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>uncss.io</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/main.min.css"/>

        <!--[if lt IE 9]>
            <script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
    <div class="jumbotron">
        <div class="container">
            <h1>U<span class="title-capitalize">n</span>CSS<span class="title-capitalize">.io</span></h1>
            <h2>Automatically remove unused CSS rules to speed up your site load time</h2>
            <ol>
                <li>Enter the URL of your page</li>
                <li>We will detect all the CSS files that you are loading and we will remove all the unused CSS rules</li>
                <li>Copy paste that new consolidated CSS file. That's the only rules you will need for that page.</li>
                <li>See the documentation on <a href="https://github.com/giakki/uncss">GitHub</a></li>
            </ol>
            <hr>
            <div class="row">
                <form class="col-lg-8 col-lg-offset-2">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Insert your URL here"
                               id="url-input" name="url-input">
                        <span class="input-group-btn">
                            <button class="btn btn-default" id="get-css" type="submit">Get CSS!</button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-6 testimonial">
                <div class="col-lg-10">
                    <p>"The fastest rule is the one that doesn’t exist. There’s a common strategy to combine stylesheet “modules” into one file for production. This makes for one big collection of rules, where some (lots) of them are likely not used by particular part of the site/application. Getting rid of unused rules is one of the best things your can do to optimize CSS performance"</p>
                    <p>Source: <a href="http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/">@kangax - perfectionkills.com</a></p>
                </div>
                <div class="col-lg-2">
                    <a href="https://twitter.com/kangax">
                        <img class="img-circle" alt="@kangax" src="img/kangax.png">
                    </a>
                </div>
            </div>
            <div class="col-lg-6 testimonial">
                <div class="col-lg-10">
                    <p> "make sure that you get all your css as early as possible. Concatenate css files, minify them, remove redundant rules. Anything you can do to accelerate css, fetching of css, will help you get faster user experience"</p>
                    <p>Ilya Grigorik (@igrigorik) is a web performance engineer and developer advocate at Google, where his focus is on making the web fast and driving adoption of performance best practices at Google and beyond.</p>
                    <p><a href="http://parleys.com/play/5148922b0364bc17fc56ca0e/chapter45/about">Source</a></p>
                </div>
                <div class="col-lg-2">
                    <a href="https://twitter.com/igrigorik">
                        <img class="img-circle" alt="@igrigorik" src="img/igrigorik.png">
                    </a>
                </div>
            </div>
        </div>
        <div class="modal fade" id="results-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" id="results-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Your Results!</h4>
                    </div>
                    <div class="modal-body" id="results-body">
                        <div id="spinner">Fetching results...</div>
                    </div>
                    <div class="modal-footer hidden" id="modal-footer">
                        <a href="" class="btn btn-primary" id="view-button">View stylesheet</a>
                        <button type="button" class="btn btn-primary" id="copy-button">Copy to clipboard</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <hr>
        <footer>
            <p>&copy; Giacomo Martino, Xavier Damman, 2014</p>
        </footer>
    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/scripts.min.js"></script>

</body>
</html>
