Messing Around with CSS as JSON

index.html

<style id=style></style>

Messing Around with CSS as JSON .markdown

Messing Around with CSS as JSON

Exploring dynamic CSS in JSON format. Yes, I realize most of this can be done without Javascript. Purely conceptual.

A Pen by Jake Albaugh on CodePen.

License.

script.js

// styles must be regenerated on resize
function loadStyles() {
  var height = window.innerHeight,
      width  = window.innerWidth,
      lineHeight = 12 * 1.6,
      lineCount  = 10,
      paddingTop = Math.max(
        Math.round(height / 2 - (lineCount / 2 * lineHeight)),
        0
      ),
      boxHeight  = height / 4; 

  // styles as json
  return {
    "#style": {
      paddingTop: paddingTop + "px",
      width: width + "px", height: height + "px"
    },
    "#style::after": {
      top: height / 2 - boxHeight / 2 + "px",
      width: width /  4 + "px", height: boxHeight + "px"
    }
  };
}

// camel to dash
function camelDash(string) {
  string = string.replace(/(webkit|moz|ms)/g, "-$1");
  return string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
}

// splitting string into array
function styleObjToString(style, tab) {
  // initial style string
  var styles = "";
  // for each selector
  for (var key in style) {
    styles += key + " {\n";
    // get the longest property name
    var longest = 0;
    for (var prop in style[key]) { 
      var dash_prop = camelDash(prop);
      longest = Math.max(longest, dash_prop.length); 
    }
    // loop through each property again writing value
    for (var prop in style[key]) {
      var dash_prop = camelDash(prop),
          spaces = new Array(longest - dash_prop.length + 1).join(" ");
      styles += tab + dash_prop + ": " + spaces + style[key][prop] + ";\n";
    }
    styles += "}\n\n";
  }
  return styles;
}

// initial styles method debounced on window size
var initStyles = debounce( function() {
  var style = loadStyles(),
      new_style = styleObjToString(style, "  ");
  document.getElementById("style").innerHTML = new_style;
}, 50);

// initial call
initStyles();

// on resize
window.addEventListener('resize', initStyles);


// debound from david walsh
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

style.css

// base styles to avoid cluttering the concept
#style {
  position:    absolute;
  display:     block;
  white-space: pre;
  padding:     0 24px;
  line-height: 1.6;
  font-size:   12px;
  font-family: monospace;
  background:  #F0F0F0;
  color:       #444;
  box-sizing:  border-box;
  transition:  height 200ms, width 200ms;
}
#style::after {
  content:    '';
  position:   absolute;
  right:      24px;
  background: #E0E0E0;
  transition: height 200ms, width 200ms;
}