Fork me on GitHub

Model

Naming

The attributes in Uranium are fairly lengthy. This is because we have chosen to follow the conventions of HTML5.

In HTML4, we weren't allowed to create our own attributes for HTML elements, beyond those defined in the specifications. In HTML5, we can create new attributes by extending the data attribute — but we have to start every attribute with "data". That's why all of Uranium's custom attributes use "data-" at the beginning. After that, we include "ur-" to signify that the attribute we are creating is for Uranium.

After those two, the names of the attributes are defined consistently depending on what type of set or component we are defining. For example, a "data-ur-set" element helps define the enclosed set of HTML elements as a unified interaction by grouping them into a set (giving the name of the interaction as a value).

Declarative JavaScript

Uranium works with declarative JavaScript. What this means is that we give elements in the HTML specific attributes. These attributes tell the JavaScript what to do.

Here are a couple of simple examples:

  <div data-ur-set="toggler"></div>
  

This attribute tells JavaScript to treat this <div> as a toggler set.

And this:

  <span data-ur-toggler-component="button" data-ur-state="enabled"></span>
  

tells Uranium to treat the <span> as a toggler button in its enabled state.