Search jQuery

jQuery Forum

jQuery Mobile and iOS 7 Look & Feel

in jQuery Mobile • 8 years ago

The style transition guide is posted, and it changes quite a bit.

Is there a person or group working on a jQuery Mobile Theme to match the iOS 7 look/feel? From what I've seen, it has a number of changes in buttons and icons, but not a complete upheaval of everything.

Full new set of default icons
UIFont.preferredFontForTextStyle to drive dynamic font sizing (Dynamic Type) - may be hard to get access to this property without a Cordova-style hook.
Blurred under-window transparencies may be hard with CSS only, my guess is transparent:yes, blurred:no.

What else is a major challenge to implementing an iOS 7 native look and feel?

Replies(9)

watusiware

Re: jQuery Mobile and iOS 7 Look & Feel

8 years ago

jQuery Mobile does not attempt to achieve a "native" look on any platform. Instead, it strives to maintain a consistent look across platforms. Thus, I do not expect changes in iOS 7 to impact jQuery Mobile styles, except to the extent that these changes influence change across the industry.

I'm sure that there will be third-parties that will want to write CSS overrides to make JQM look native on iOS 7. Periodic searchs on Google, gitHub, etc. might find these for you.

Personally, I think the blurred under-window transparencies are annoyingly distracting. I hope this is going to be a Settings option. It's not even clear to me just what the blurred content is - your "desktop"? Your background image? The page "underneath" (which is.... what? The previous page? App-defined?)

I believe the blur effect is easy to achieve with CSS but will not work on all platforms and I think would be version-dependent on iOS. (Starting only with iOS 5 or 6, not sure which.) If you really want this distraction.

I would look for documentation updates on UIWebView in the beta documentation, and any beta documentation for Safari. (Join the Safari Developer Program - free.)

Keep in mind this is still under non-disclosure, so discussing details here would be a violation of the developer agreement if you are an iOS developer.

colin.ebe..

Re: jQuery Mobile and iOS 7 Look & Feel

8 years ago

"jQuery Mobile does not attempt to achieve a "native" look on any platform."

Personally I think that statement is quite wrong! The similarities between jQM and the (soon to be old-) Apple style are numerous. Many people choose to use jQM over jQTouch, Lungo, Enyo etc... precisely because it does a good job of emulating iOS. See propertycross.com for a comparison of these.

Personally I think jQM will have to change in order to stay relevant.

Colin E.

johncmoly..

Re: jQuery Mobile and iOS 7 Look & Feel

8 years ago

jQuery UI & mobile look nothing like iOS and never have done. It's not about trying to copy a platform that is copying other platforms - it's about setting a standard of its own, which is has done very well.

00michaelj

Re: jQuery Mobile and iOS 7 Look & Feel

8 years ago

In reply to option 3 - I saw this jsfiddle - http://jsfiddle.net/SvH6w/6/ on this stackoverflow post: http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css

A lot of work we will have to do ourselves unless someone who is very kind comes up with a iOS7 CSS theme for us. For my upcoming app I will try and make it iOS7 like by using Jquery Mobile js, and my own custom CSS, it's going to be a lot of work.

fabianluft

Re: jQuery Mobile and iOS 7 Look & Feel

8 years ago

We tried to get the metro style of windows 8 on JQM and got some really good achievements on this by modifying the CSS. In our case we didn't modified JQM to match each and every platform instead we force everybody to use the metro style :). If you want to get some more detailed information let me know and I can provide you some insights.

watusiware

Re: jQuery Mobile and iOS 7 Look & Feel

8 years ago

I stumbled across this yesterday:

http://dailyjs.com/2013/06/11/jquery-roundup/

Talks about "flat design" and jQuery/jQuery Mobile.

Mentions these projects:

https://github.com/ququplay/jquery-mobile-flat-ui-theme

which is apparently based on this Bootstrap theme:

http://designmodo.com/flat-free/

And the blur effect as a jQuery plugin:

https://github.com/jakiestfu/Blur.js

jaspermde..

Re: jQuery Mobile and iOS 7 Look & Feel

8 years ago

Hi all,

In jQuery Mobile 1.4 (alpha release in week of July 15) we will introduce a new default theme. This will have a flat, more modern, design.

Just to be clear, it's true that we don't achieve a native look of any platform. jQuery Mobile is a cross-platform framework and so is our theme. We are very happy though that there are people who develop and share custom themes that mimic a specific platform look, so it's available if you want this for your web app.

So the new theme has nothing to do with the changes that Apple announced for iOS7. We already decided about this and started working on the new theme a couple months ago.

Cheers,

Jasper

benjaminh..