Moovweb is excited to announce the open source release of our Javascript framework for mobile sites, Uranium.

Uranium JS allows you to include some awesome widgets in your mobile (or desktop) site by adding just a few HTML attributes. That’s right! you don’t have to know any Javascript to get it to work.

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 accordionscarouselsmaps, 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.

[![](https://blog.moovweb.com/cnt/uploads/2013/09/unclicked.png "unclicked")](http://uraniumjs.com/toggler.html)
[![](https://blog.moovweb.com/cnt/uploads/2013/09/clicked.png "clicked")](http://uraniumjs.com/toggler.html)
 

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>
That's it!

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 incredibly lightweight: a mere 8.4KB when zipped. It also comes bundled with XUI, so you have a compact and powerful javascript library for any other JS needs.

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.

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!