examples/loading-stylesheets/index.html from dolox/fallback

examples/loading-stylesheets/index.html
Summary

Maintainability

Test Coverage

Issues
<!doctype html>
<html>
<head>
    <script src="../../dist/fallback.min.js" type="text/javascript"></script>
    <title>Fallback JS - Examples - Loading Stylesheets</title>
</head>

<body class="container">
    <a class="col-xs-12 text-right" href="../">Back to Examples</a>

    <h1 class="text-center">Loading Stylesheets</h1>

    <script type="text/javascript">
        var config = {
            'libs': {
                'css$main': {
                    // Notice that in our `<head>` element we already included our `main.css` file. The library will check to see if
                    // the style `#stats` already exists on the page, and if it does, it won't attempt to load the stylesheet a second
                    // time.
                    'exports': '#stats',
                    'urls': '../css/main'
                },

                'css$bootstrap': {
                    'exports': '.col-xs-12',
                    'urls': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min'
                }
            }
        };

        var load = function(lib) {
            require([lib], function(reference) {
                document.getElementsByTagName('body')[0].innerHTML += '<h3 class="alert-success">`' + lib + '` is ready!</h3>';
            });
        };

        fallback.config(config);

        var libs = [];

        // Loop through and load all of our libraries.
        for (var lib in config.libs) {
            load(lib);
            libs.push(lib);
        }

        // Once all our scripts have loaded, set the snow color and display our stats.
        require(libs, function() {
            document.getElementsByTagName('body')[0].innerHTML += '<h1 class="text-center">Stats</h1>';
            document.getElementsByTagName('body')[0].innerHTML += '<pre id="stats">' + fallback.stats() + '</pre>';
        });
    </script>
</body>
</html>