Descartes

Features

Descartes has most of the features you're familiar with from Less and Sass, but adds the power of JavaScript to your styles. Get an overview of what the library has to offer.

var standardSize = 16;
var tree = { // Just a JavaScript object literal
  "html": {
    "margin": 0, // Implicit conversion to px
    "padding": 0,
    "height": "100%",
    "body": { // Nested inside of `html`
      "color": "#333",
      "font-family": "Helvetica",
      "font-size": standardSize, // Use variables
      "h1": { // Nested inside of `html body`
        "font-size": standardSize * 1.2, // Operations
        "font-weight": 300
      }
    }
  }
};
var d = new Descartes(tree); // Renders style tree

new Descartes({
  "html": { // Root of tree, so priority = 0
    "color": "red", // 0
    "h1": { // Nesting, so priority++
      "color": "white" // 1 (wins over red)
    }, // Finish nesting, so priority--
    "body": { // priority++
      "h1": { // priority++
        "color": "blue" // 2 (wins over red, white)
      } // priority--
    } // priority--
  }
});
// After cascading, you will get <h1 style="color: blue;">

var _reset = { // Mixin objects usually prefixed with _
  "margin": 0,
  "padding": 0
};
var _font = function(n) { // Mixin function that returns an object
  var mixin = {
    "font-size": 16 * Math.pow(1.4, n), // Modular scale
    "font-family": "Helvetica",
    "font-weight": 600
  };
  return mixin;
};
var tree = {
  "html": {
    "_mixins": _reset, // Gets margin and padding!
    "background": "#fff",
    "h1": {
      "_mixins": _font(6) // You can pass function values
    },
    "h2": {
      "_mixins": _font(5),
      "font-weight": 300 // Explicit rules get priority
    },
    "p": {
      "_mixins": [_font(1), _reset] // Applied in order
    }
  }
};
var d = new Descartes(tree);

// Vertical alignment using margins
var tree = {
  .
  .
  .
  ".verticalAlign": {
    "margin-top": function(_) {
      // _ is the individual .verticalAlign element
      var parentHeight = _.parentNode.height; // Parent height (!)
      var height = _.height; // Get current node's height
      return (parentHeight + height)/2; // Compute margin in px
    }
  }
  .
  .
  .
};
var d = new Descartes(tree);

// Visible nav bar based on scroll direction like on this page

var lastScroll = $(window).scrollTop(); // Use jQuery if you want!
var tree = {
  "nav": {
    "_listeners": [[window, 'scroll']], // Listen to scroll event
    "overflow": "hidden",
    "position": "fixed",
    "width": "100%",
    "transition": "all 0.5s ease", // Nice animations
    "height": function(_) { // Dynamic value
      var scroll = $(window).scrollTop();
      if (scroll > lastScroll) { // Detect scroll direction
        lastScroll = scroll;
        return 0; // Hide the nav
      }
      lastScroll = scroll;
      return 50; // Show the nav
    }
  }
};
var d = new Descartes(tree);

var tree = {
  ".animate": { // Uh oh, forgot browser prefixes!
    "animate": "all 0.5s ease"
  }
};
// This is a transformer that will add prefixes!
function prefixTransformer(tree) { // It takes a style tree
  var newTree = {}; // Store a temporary value
  for (var key in tree) {
    var value = tree[key]; // Get the property value
    if (typeof value === 'object' && !(value instanceof Array)) {
      // Recursively apply nested rules
      newTree[key] = prefixTransformer(value);
    } else {
      newTree[key] = value;
      if (key === "animate") { // See if it needs a prefix
        var prefixes = ["-webkit-"];
        for (var index in prefixes) {
          // Add browser prefixes to tree
          newTree[prefixes[index] + key] = value
        }
      }
    }
  }
  return newTree; // And "transforms" it with prefixes
}
// Apply the transformer before render
new Descartes(prefixTransformer(style));