example.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Assets Helper Example</title>
</head>
<body>

    <!-- alert element -->
    <div id="alert">
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro debitis odio nisi. Odit eligendi necessitatibus maxime ab deleniti in voluptatem, obcaecati exercitationem ducimus adipisci soluta hic laboriosam dolorem animi. Facere.
        </p>
    </div>


    <!-- alert preivew ( showing alert template rendering ) -->
    <div id="alert-preview"></div>


    <!-- alert template -->
    <QuixTemplate id="alert-template">
        
        <style>
            body {
                background: white
            }
        </style>

        <QuixStyle>
             // loading css ( JS WAY )
            var alert = Object.assign({}, Assets); 
            alert.desktop("#alert-2", "background: {{ color }}");
        </QuixStyle>

        <QuixHtml>
            <div id="alerts">
                <!-- you can use twig sytax -->
                {% for alert in alerts %}
                    <div id="{{ alert }}">
                        <p>{{ alert }}</p>
                    </div>
                {% endfor %}
            </div>
        </QuixHtml>

        <QuixScript dependencies="
            http://example.com/js/foo.js,
            http://example.com/js/bar.js
        ">
            // you have access jQuery and lodash :) 
            // $("#alert-1").html("updated element")
        </QuixScript>
    </QuixTemplate>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>

    <!-- assets-helper lib -->
    <script src="css.js"></script>
    <script src="image.js"></script>
    <script src="template.js"></script>
    
    <!-- assets-helper API -->
    <script>
        /////////////////////////////////////////////////////////
        //
        // Loading Alert element assets
        //
        /////////////////////////////////////////////////////////
        var AlertAssets = Object.assign({}, Assets);

        let imgUrl = 'http://via.placeholder.com/460x200?text=QUIX';
        let background = {
            'color' : '',
            'background-image': 'url(' + imgUrl + ')',
            'font-size' : '20px'
        };
        // css calling
        AlertAssets.css('#alert', background)
        //AlertAssets.css("#alert", "background: red; color: white; padding: 100px;");
        AlertAssets.padding("#alert", {
            top: 10, bottom: 20, right: 10, left: 15, // desktop
            responsive: true, // want responsive
            tablet: {
                top: 10, bottom: 20, right: 10, left: 15 // tablet
            },
            phone: {
                top: 10, bottom: 20, right: 10, left: 15 // phone
            }
        })

        // width prop
        AlertAssets.width('#alert', {
            desktop: 20,
            responsive: true,
            tablet: 10,
            phone: 18
        })


        // loading alert assets
        AlertAssets.load("#alert");

        // rendering template
        AlertAssets.render("#alert-template", {
            alerts: ["alert-1", "alert-2"],
            color: "green"
        }, "#alert-preview");
    </script>
</body>

</html>