playground/basic/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSSX</title>
</head>
<body>
  <h1>Hello <small>CSSX</small> world!</h1>
  <button data-color="#F00">red</button>
  <button data-color="#0F0">green</button>
  <button data-color="#00F">blue</button>
  <pre></pre>
  <br /><br />
  <button id="colorize">click me</button>
  <script src="../../packages/cssx/lib/cssx.js"></script>
  <script>

    cssx.minify(false);

    var h1Color = '#000';
    var randomColor = '#000';

    var updateStyles = function () {
      var stylesheet = cssx('my-styles');
      var body = stylesheet.add('body');
      var h1 = body.descendant({'h1': { 'color': h1Color }});

      h1.descendant({ 'small': { 'font-size': '0.3em' }});
      stylesheet.add({ '#colorize': { color: randomColor }});

      showGeneratedCSS();
    };

    // buttons
    [].slice.call(document.querySelectorAll('button[data-color]')).forEach(function (btn) {
      btn.addEventListener('click', function () {
        h1Color = btn.getAttribute('data-color');
        updateStyles();
      });
    });

    // random
    document.querySelector('#colorize').addEventListener('click', function () {
      randomColor = getRandomColor();
      updateStyles();
    });

    // helpers
    function getRandomColor() {
      var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    };
    function showGeneratedCSS(css) {
      document.querySelector('pre').innerHTML = cssx.getCSS();
    };

    // first run
    updateStyles();

  </script>
</body>
</html>