Want more? Subscribe to my free newsletter:

jQuery UI Bootstrap - A New Bootstrap-inspired Theme For Your Widgets

January 1, 2012

I recently released the first version of a new project called jQuery UI Bootstrap - a Twitter Bootstrap inspired theme for UI widgets. For a demo of the theme or to download it, hop on over to the project homepage.

Introduction

Bootstrap was one of my favorite OS projects to come out of 2011 and I found myself regularly using it a base for a number of projects, both at work and otherwise. However, whilst planning out the user-interfaces for some new projects at AOL, I ran into a problem:

We wanted to use jQuery UI for widget development but also wanted to use it alongside Bootstrap. Bootstrap has a great visual design for everything from buttons to tabs and would provide us with an excellent base theme we could iterate on as projects progressed.

As some of you may know, not only wasn't there a Bootstrapped theme available for jQuery UI but if you added both it and Bootstrap to a page, you would quickly find that a number of CSS styles for UI widgets would break due to collisions. This isn't at all a fault of the Bootstrap project - it wasn't created to be used with jQuery UI, however, a solution was required.

What is jQuery UI Bootstrap?

jQuery UI Bootstrap offers a clean implementation of the Twitter Bootstrap design as a jQuery UI theme that can be applied to widgets . It also includes a 'cleaned up' version of Bootstrap which *can* be used alongside this particular theme (and possibly others) without needing to worry about styles colliding. 

As a demonstration, why not take a look at the project's homepage? - both the intro area and download buttons are using Bootstrap for theming whilst everything else is using a jQuery UI for theirs. The benefit of this is that you're free to use everything from Bootstrap's wells to grids for your page layout and the jQuery UI theme for interactive widgets.

It's a solution which (I hope) others find useful. 

The project is still quite early on in development, but you can already use a number of components (buttons, button sets, horizontal sliders, tabs, modal windows, date-pickers) in production with some confidence it should all work. Tweaking is still being done for things like buttons with icons and third-party widgets, but I'll be sure to post up any progress up on GitHub so the community can use the theme too.

Frequently asked questions

What browsers does the theme target?

At present: Chrome 15+ (supports 13/14 too), Opera (stable + next), Firefox 5+, Safari 5+, IE 8+. I

Is the theme compatible with Wijmo?

The initial release shows a proof-of-concept implementation of the Bootstrap menu styles applied to the Wijmo menu. Chris Bannon is currently working on a fork of jQuery UI Bootstrap with the goal of adding improved Wijmo support (to this and other components) and I'll be sure to announce once that work has been merged in.

Feedback

If you have any ideas or issues you'd like to submit about the project, please feel free to do so either in the comments section below or on GitHub.

A quick thanks to everyone on Twitter that provided me feedback on the theme over the past week. You really helped me get a sense of what needed to be tweaked for 0.1 and I appreciate it.