CODEWITHSUNDEEP
cssjquery-mobiletwitter-bootstrapresponsive-design
BertC
BertC

Reputation: 2656

JQuery Mobile, Bootstrap and CSS3 Media Queries, what combination to choose

JQuery Mobile, Bootstrap and CSS3 Media Queries

What combination to use

To have an UI Framework we all should use something like Bootstrap. To develop for Mobile I need something which makes it easy to switch pages within one HTML file, like JQuery Mobile (JQM) does. To develop for different screen-widths (iPhone, iPad, etc) I need to develop according to Responsive Webdesign rules.

JQM does not support Media Queries according to http://jquerymobile.com/test/docs/api/mediahelpers.html where it says that the helper classes are deprecated. It points you to Media Queries, of which there are no good examples unless you use Bootstrap or Skeleton

When looking for information to combine Bootstrap with JQM there are no good examples apart from Andy Matthews who created a Bootstrap theme in JQM. http://www.andymatthews.net/read/2012/02/13/New-jQuery-Mobile-theme:-Twitter-Bootstrap

So, what is common practice in developing WebApps with a responsive webdesign? Are people ignoring JQM (and doing the page-in-html stuff themselves) or are they ignoring Bootstrap (and doing the responsive webdesign by hand with media queries in JQM) ?

Or is there an overall solution covering everything to de WebApp development with? (Please don't say PhoneGap)

To add some info on my quest for clarity: I have the following lines in my header of index.html:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Bit much according to my opinion? Or is this correct? Hope anybody of the more experienced WebApp developers can shed any light on this.

Thanks,

Upvotes: 1

Views: 3980

Answers (1)

codaniel
codaniel

Reputation: 5253

Sure you could probably get boostrap and JQM css to play nicely together. And the way you have it should work for the most part with the exception of maybe a class or two being overwritten. If you do chose this route be sure to make a custom build of bootstrap that only includes that part of bootstrap you intent to use. Eliminate as much overhead as possible.

It is however not that hard to use css3 media query. Taking a quick crash course for media queries will save your users bandwidth and also ensure that your site loads as fast as possible.

Here are some great examples and tutorials on using css3 media queries:

http://css-tricks.com/css-media-queries/

http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design

http://webdesignerwall.com/tutorials/css3-media-queries

http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

Upvotes: 1

Related Questions