Uranium is a set of interactions — self-contained bits of code that allow you to do neat, interactive things on your website.
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.
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.
<div data-ur-set="carousel"> <span data-ur-carousel-component="count"></span> <a data-ur-carousel-component="button" data-ur-carousel-button-type="prev">Prev</a> <a data-ur-carousel-component="button" data-ur-carousel-button-type="next">Next</a> <div data-ur-carousel-component="scroll_container"> <img data-ur-carousel-component="item" src="images/sample1.png" alt="1"> <img data-ur-carousel-component="item" src="images/sample2.png" alt="2"> <img data-ur-carousel-component="item" src="images/sample3.png" alt="3"> <img data-ur-carousel-component="item" src="images/sample4.png" alt="4"> <img data-ur-carousel-component="item" src="images/sample5.png" alt="5"> <img data-ur-carousel-component="item" src="images/sample6.png" alt="6"> <img data-ur-carousel-component="item" src="images/sample7.png" alt="7"> <img data-ur-carousel-component="item" src="images/sample8.png" alt="8"> </div> </div>
[data-ur-set="carousel"] { overflow: hidden; position: relative; } [data-ur-carousel-component="item"] { float: left; }
<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; }
<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; }