Best approach to adopting Responsive HTML when I use jQuery UI

Question

I have a web application that was built using jQuery UI and all our own CSS framework. I would like to change the app to use a responsive framework so I can get it working on mobile devices better. The first one that comes to mind is Twitter Bootstrap. I am wondering what other peoples experiences are considering the conflicts with jQuery UI and Bootstrap are. Is it best to

1. Get rid of jQuery UI and convert all to bootstrap controls (most work).
2. Retain jQuery UI and just use the Twitter Bootstrap scaffolding (possible the best option)
3. Use a totally different scaffolding framework
4. Something else

Answer 1

This is such an open question it would be impossible to properly answer. Why? Because the reasoning behind such a switch depends on so many different factors from technicalities such as jQuery UI widgets that are used throughout the app through to how comfortable you are as a developer with the new frameworks. So in response, a few questions to ask yourself to help you make up your mind.

• Am I using jQuery UI widgets throughout my application?

If yes, then consider implementing solutions to fill voids in the JQUI CSS framework. Most notably a responsive grid scaffold. Swapping out JQUI widgets to other vendors can be very time consuming.

Gridpak responsive grid generator

Customise twitter bootstrap to fill the JQUI gaps

• Will switching to another CSS framework actually assist me?

Unfortunately with the known gaps in the JQUI CSS framework the answer to this (for me) anyhow has been yes. I predominantly now use either Twitter Bootstrap or Foundation, however I do still use JQUI, im just precise about the JS and CSS I need when I customise my JQUI build.

Foundation CSS Framework

• How much time is the switch and subsequent re-factor going to cost me?

The answer to this is critical. If you loose short term from the switch, it would probably be better to persevere with what you have, however if the long term gain is substantially higher than the short term loss, it could tip the balance in favour of switching.

If you were to switch, and you're not already doing so, maybe introducing a parsing tool such as SASS or LESS into the equation could be well worth it. (SASS is my preferred route)

Twitter Bootstrap SASS'ified

Also check out Compass

• When I'm finished will I actually have achieved what I originally intended?

This is purely down to due-diligence and fact finding. Know what you're new framework is capable of before making a decision. That in essence is what this question boils down to.

Answer 2

Generally speaking, many Bootstrap / jQueryUI conflicts can be avoided by making sure the bootstrap.js follows jqueryui.js, and knowing specifically which components are prone to conflicts (ie; tabs, buttons, etc..)

If you're only using Bootstrap for the responsive grid, then you don't need to include bootstrap.js at all -- just use the CSS.

You may also be interested in looking at Addy Osmani's project:

https://github.com/addyosmani/jquery-ui-bootstrap