We created Uranium because we felt the need for consistent UX patterns for mobile. We were writing a fair amount of boilerplate code for various widgets, such as accordions, carousels, maps, and select-lists. The widgets seem diverse, but functionally only require very simple changes to the document.
Here's a quick demonstration of what we call an accordion - you click the button and the content appears.
The HTML code to generate this widget looks like:
<div data-ur-set="toggler"> <div data-ur-toggler-component="button"> Click Here! </div> <ul data-ur-toggler-component="content"> <li> Hat </li> <li> Socks </li> <li> Shoes </li> <li> Gloves </li> <li> Shirts </li> </ul> </div>
Now, accordions are just an instance of a toggler. So are popups and menu drop-downs. The common feature between these is their elements' attributes change to reflect their state. The rest is just styling with CSS. This separation of function and form makes Uranium succinct and powerful. In order to keep things DRY, there's an easy way to specify that we want dynamic behavior to apply to some content. What better place to specify content than adding attributes to the content itself? This is called a 'declarative style' framework. All you do is add Uranium attributes to HTML elements to specify their behavior; uranium.js takes care of the rest.
The core tenets of uranium are:
It’s professional: it’s really easy to apply your own styles to a widget.
It's easy to use: basically, all you have to do is decide what functionality you need, then apply appropriate attributes to elements in your HTML. Want to see how easy it is? Just watch this short video:
There’s loads more examples on the Uranium website. Go check it out at uraniumjs.com.
Uranium is the result of a lot of hard work from Sean Jezewski, Hampton Catlin, Jeff Patzer, Aaron Leung and the rest of the Moovweb team. We hope you enjoy it!