Fork me on GitHub

What is Uranium?

Uranium is a set of interactions — self-contained bits of code that allow you to do neat, interactive things on your website.

How to Use:

  1. Include the Uranium library and jQuery >= 1.3
  2. Give your HTML pre-defined data attributes
  3. … that's it!

It's seriously that easy. We've put in all the hard work to make awesome interactions that are really easy to use.

Uranium is perfect for mobile development; lots of the interactions were made with that in mind. But, as you can see by the examples below, they're great on a desktop site too.

What is an Interaction?

We define interactions as behaviors that enhance the functionality of a set of HTML elements. Uranium defines several data attributes you can give to your HTML elements, allowing your users to interact with them in a new way.

We've created pages to describe each interaction provided by Uranium, accessible from the menu above. While you're up there, you might also want to check out the Training menu for our overview documentation, getting started tutorial, and advanced tutorial.

Top Ways to Use Uranium

Carousel

More about carousel

Tabs

Interaction HTML CSS
First Second Third
First tab content
Second tab content
Third tab content
        <div data-ur-set="tabs">
          <span data-ur-tabs-component="button" data-ur-tab-id="one" data-ur-state="enabled">First</span>
          <span data-ur-tabs-component="button" data-ur-tab-id="two">Second</span>
          <span data-ur-tabs-component="button" data-ur-tab-id="three">Third</span>
          <div data-ur-tabs-component="content" data-ur-tab-id="one" data-ur-state="enabled">
            First tab content
          </div>
          <div data-ur-tabs-component="content" data-ur-tab-id="two">
            Second tab content
          </div>
          <div data-ur-tabs-component="content" data-ur-tab-id="three">
            Third tab content
          </div>
        </div>
      
        [data-ur-tabs-component="content"][data-ur-state="disabled"] {
          display: none;
        }
      
More about tabs

Toggler

Interaction HTML CSS
Click Here!
  • Hat
  • Socks
  • Shoes
  • Gloves
  • Shirts
      <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>
      
        [data-ur-toggler-component="content"][data-ur-state="disabled"] {
          display: none;
        }
      
More about toggler

Sites using Uranium include …

Macy's ACS Belk Ross-Simons Bare Necessities