permalink

43

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

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. 

43 Comments

  1. Is it OK to use it on existing projects built on Twitter Bootstrap, and if so, what changes should be made?

    Thanks for this, really needed for UI/UX implementations

    • If you’re going to try using the theme with existing projects built on Bootstrap I would recommend first trying to replace your existing bootstrap.css file with the version included in my 0.1/0.x download pack. Visually, there shouldn’t be too many differences between them.

  2. Very cool. As soon as I saw Bootstrap I thought: I need a jquery theme to go with it! Thanks for making that happen.

    • Thanks. I should mention that none of the work in this theme modifies either official jQuery UI widgets nor third-party widgets that are previewed using it – it’s all purely done through CSS. If there are specific widgets (I imagine you may be referring to Filament’s DatePicker or Wijmo’s menu) that don’t follow the widget factory best practices, there may be a design decision they made for why they chose not to. I’d review the widgets to confirm and ask the authors directly as they’d probably have a more clear answer about this than I.

  3. Pingback: jQuery UI Bootstrap – A Theme Inspired From Twitter Bootstrap | Web Design Startup

  4. Thanks Addy for making this available. I wondered what your position is on also releasing LESS source files for the custom theme?

    • No at all! This is something which has previously come up on the issue tracker before and my position on it is that I would like the theme to hit version 1.0 (i.e fully stable on all supported platforms/browsers/devices) before releasing accompanying LESS source files for the theme. Hopefully that approach makes sense :)

  5. Hi,
    I’ve build the LESS version of JQuery UI, working with the Bootstrap.
    I’ve made it from your version of JQuery UI 1.8.16.
    Would you like it ?
    Cheers

  6. Pingback: ברשת – רשימת קריאה וצ’ופרים מהווב להשבוע « טכנולוגיה בשביל אנשים

  7. Hi!
    All this seems very good!

    I am a bit new to this with web development, and wonder if you have any documentation where I can read what properties, classes, actions, methods there is on the objects ?

    Keep up the good work!

      • Hi Addy,

        we’ve found this incredibly useful recently, it looks fantastic. Did you get anywhere with v2.0 of bootstrap? Is there something we can contribute to?
        Thanks and congrats on the new job!

        Dave

        • If you guys would like to help with the Bootstrap 2.0 work we’re planning on having a weekend sprint to get the work done to move the project over to that in a few weeks. Would be happy to keep you posted if you’d like to help out :)

  8. Hello,
    Thanks for the great theme! Do I need to use the copy of jquery you provided, or is it OK to use a CDN for current minified jquery?

    Thanks Again, theme looks great!

    Jason

  9. Pingback: Takula » jQuery UI Bootstrap – A Theme Inspired From Twitter Bootstrap » Takula

  10. Pingback: The Web logix Blog » Blog Archive » jQuery UI Bootstrap – A Theme Inspired From Twitter Bootstrap

  11. I was looking araound, but didn’t find more information on how to use the less files and build my own version of this UI theme. Can you provide some more information for developers how to tweak the theme and build it?

    Thanks

  12. Hi,
    This looks like great stuff. Thanks for the contribution. You’re the man! Trying it out now.

    Two questions:

    1. It’s not obvious to me how to “set it up”: Am I correct in assuming that I simply need to add the jquery-ui-1.8.16.custom.css declaration after the Twitter bootstrap.css? The css file is the only place you made changes or do I need to use the other files also?

    2. The current download uses the smoothness UI theme. Is it possible to overlay any theme e.g I am using start. Is this something that can be done at the moment?

    Thanks again …

  13. Hello Addy, and thanks for all this work.
    I have been trying to integrate your theme into a Ruby on Rails application that was already using jQuery UI and Twitter/Bootstrap, unsuccessfully. I am not filling an issue on your GitHub because my problems may come from the fact that jQuery UI and Twitter/Bootstrap were already included in the application.
    So far, I have run into the following problems :
    - the div class “page-header” gets hidden under the div class “navbar”
    - using the provided jQuery UI does not work (widgets are not created), and it does not resolve the half-colored-buttons bug
    Maybe someone could help me understand this project, for instance by indicating the order in which I should be loading the files (I have already tried many combinations)…
    Best regards.

  14. Hey Addy, great work on the project! Just wanted to know how are you guys planning to upgrade jq-ui-bs with each incremental upgrade of bootstrap.

    The first option is of course to manually change the jQuey UI CSS Classes. The second is to use variables and mixins from within Bootstrap within the project, so its (almost) auto updated with each release of bootstrap.

    Kind of what we are trying to do with fbstrap http://github.com/rcorp/fbstrap

    • We’re currently aiming to get our a new release of the project in January. I’m hopeful that after the upgrade to 2.x, incremental updates to match Bootstrap will be a lot more straight forward.

Leave a Reply

Required fields are marked *.