What is HTML5 Mobile UI framework ?
With increasing popularity of HTML5 for mobile development need for UI frameworks was felt.You can think of UI framework as libraries.You can include them in your mobile app.After including You can use the controls (User Interface elements) provided by them.
One of the major advantage of using HTML5 for mobile app development is cross platform support.You can easily migrate or use same code base for Android App development or iPhone App development.So mobile UI frameworks were created with aim to give consistent look on all platforms or give native look on all platforms.These libraries make development easier and faster.
You do not have to write CSS yourself.You can customize them to suit your needs.Below I will present the list of HTML5 mobile UI framework which you can use for your app development.The list is not in any order.But this should not impact your decision making.You can go through the details and choose the one which fits in your requirement.
HTML5 Mobile UI framework list
HTML5 CSS only Mobile UI framework
I have used this to create few of my cross platform mobile apps (Android,Windows and Facebook). I have not ported app to iOS but it does support it as well.It works well on all the platforms.It is simple and easy to customize.I have also written detailed review of Topcoat at this post. You can read my experience and about features of this library before making a decision.But it is certainly one to look into.
It is worth mentioning that they support Android version 4 and above.So on older Android phones they may not work.I tried it on device running Android 2.3.3 version.The display was fine but controls were not responsive.So if you are aiming at older Android version this may not be a choice.
HTML5 Native looking Mobile UI framework
The brilliant people of Intel are behind App Framework.It is open source.App Framework is developed for mobile apps only.This makes it fast and less bulky.The best part is the wide range of platforms supported and native look it gives to your apps on each of the platform.
The single code base without any customization or parameter setting from your end will adapt itself to Android,Windows Phone,iOS,Tizen,Firefox OS and Blackberry.On Android,Windows and iOS the app will look like a native app.
The App Framework version 3 which is the latest version as of now supports Android 4 and above,iOS 7 and above,Tizen,Firefox OS,Blackberry 10 and Windows Phone 8 and Windows 8. If you want support for Android version less than 4 then you can use App Framework 2.3.
HTML5 jQuery Independent Mobile UI framework
I have not used Ionic in my apps due to the learning involved. My requirement was fulfilled by other simple to use frameworks.But in case you are building complex app then it is worth checking out this framework.It is built specifically for mobile devices.It is jQuery independent and is optimized for AngularJS.
The latest Ionic framework version 1.0.0 supports Android version 4.1 and above,iOS version 7 and above.Currently the Windows phone and other platforms are still not supported.Support for these platforms are planned in future release.
HTML5 JS only Mobile UI framework
It is very new framework.As of writing the framework had only one release.So you may want to wait for sometime before giving a try.On website small example codes and documentation is provided.It may be good library to look ito for Game developers.
HTML5 Mobile UI framework with maximum browser support
The list can not be complete without mention of jQuery mobile. This is by far the most popular HTML5 mobile UI framework.The documentation is overwhelming which sometimes can make a beginner nervous.Feature wise and browser support wise it is the top framework.It still supports Android version less than 3 not to mention 4.
It is bulky library similar in lines with Bootstrap and ZURB (may be more meaty than the other two). You can learn it and create all your apps with it without any issues.Though the learning curse is there.While considering UI framework for my apps I did look into this.But the learning curse,size and slowness of the framework made me not to go for this.
HTML5 Mobile UI framework jQuery Mobile competitors
Bootstrap is one of the most popular HTML5 UI framework out there.It is tested framework and used by large number of apps.You may have seen many WordPress themes using it as well.It is also used to create responsive websites.So the amount of documentation available for it is huge.Bootstrap supports most browsers including Internet Explorer 8 and above.
So size of Bootstrap is more than some of the frameworks mentioned in this post.It is also less fast than some of the options mentioned above like App Framework,Topcoat and Ratchet.
ZURB foundation is becoming popular in WordPress theme developers as well as mobile web app developers.It was originally developed keeping responsive web in mind but can safely be used for web apps.The documentation is detailed and easy to follow.You can also use AngularJS along with it.
The motion UI support is also present which allows you to create beautiful animations.Feature wise ZURB is right up there competing with Bootstrap and jQuery mobile.Some learning curve is there as well.It supports most of the modern browsers.So support wise you will not have a road blocker.But if you are looking to support Internet Explorer 7 or 8 then you can consider using Bootstrap or jQuery mobile.But for mobile apps I do not think Internet Explorer 8 support is a road blocker.
HTML5 Mobile UI framework Emerging players
So you need to check out if they work well on Windows devices.Ratchet is new player.They have not yet decided the base Android version and browser component to support.So you need to check it out yourself.Using Ratchet in your application is easy.They also have decent sized documentation in place on their website.
Onsen UI officially supports Android version 4 and above iOS version 7 and above.It also supports Google Chrome and Safari browsers.So Windows phone is not officially supported or other browsers like Firefox.It is also simple to use.I found the documents easy to follow and learning curse is less.I may consider using them in my next project.
They also have web based CSS generator.On that page you can change look and feel of your components.This makes customizing the controls easier.I would like to see official support for Windows mobile phones in near future.You can also try using them on Windows as Topcoat does works well on Windows.Since it is based on Topcoat so it may also work on it.
ChocolateChip-UI is dependent on jQuery.It officially supports Android,iOS and Windows phone platforms.It is also open source library.It comes with default themes for above platforms.You can customize the themes using web interface and download the resulting CSS file.Then in your app you can replace the default file with this one.
So customizing ChocolateChip-UI is simple task.The default themes are designed to make apps look native on the platforms.So if you want native looks for your app then you can go with the default layout.It does not reveal about version support for different platforms so you may have to manually test your apps on different version to find out.The dependency on jQuery does make it bulky library.AS you have to include compatible version of jQuery to use it in your app.
Above I have tried to mention different kinds of frameworks.From the less known ones to more established players.The simple new frameworks to complex ones.You can use any of them for simple app development without any issues.I choose the ones which have less learning curve and fit in my requirement out of box.I do not have to customize them much.
Sometimes the choice of framework depends on app needs so you can go through the list and browse the websites to get a feel about them.I would be writing individual review about these frameworks going forward describing my experience with them and pros and cons of them.
I would also like to hear from your about any new player out there or your opinion about any of these frameworks.