Uranium JS | Home

What is Uranium?

Uranium is a set of widgets – snippets of code that allow you to do neat things on your website.

How to Use:

Include the Uranium library
Give HTML pre-defined attributes
… that's it!

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

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

Why use Uranium?

It's Lightweight

The whole Uranium library is 15 KB zipped! This includes all the widgets and xui.

It's Easy to Use

Uranium requires zero javascript programming on your part.

*he may not have actually said this, but we think he'd love Uranium anyway.

What can Uranium do?

Example

The Code

Toggler

Click on the button

And content appears

<div data-ur-set="toggler">
  <p>Toggler</p>
  <div data-ur-toggler-component="button">
    <p>Click on the button</p>
  </div>
  <div data-ur-toggler-component="content">
    <p>And content appears</p>
  </div>
</div>

Example

The Code

Carousel

<div data-ur-set="carousel" data-ur-carousel-component="view_container" data-ur-touch="disabled">
  <div data-ur-carousel-component="scroll_container">
    <img data-ur-carousel-component="item" src="1.jpg" />
    <img data-ur-carousel-component="item" src="2.jpg" />
    <img data-ur-carousel-component="item" src="3.jpg" />
    <img data-ur-carousel-component="item" src="4.jpg" />
  </div>
  <div data-ur-carousel-component="button" data-ur-carousel-button-type="prev">&lt;</div>
  <div data-ur-carousel-component="button" data-ur-carousel-button-type="next">&gt;</div>
</div>

Example

The Code

Select List

Click on

a Value

in this

List

<div data-ur-set="select-list">
  <select data-ur-select-list-component="select">
    <option selected="true" value="SKU-A"> Click on </option>
    <option value="SKU-B"> a Value </option>
    <option value="SKU-C"> in this </option>
    <option value="SKU-D"> List </option>
  </select>
  <ul data-ur-select-list-component="content">
    <li value="SKU-A"> Click on </li>
    <li value="SKU-B"> a Value </li>
    <li value="SKU-C"> in this </li>
    <li value="SKU-D"> List </li>
  </ul>
</div>

Uranium is used by...