Custom CSS for Mobile development using Phonegap/Cordova

Question

I´m planing to use Cordova v3 to develop a generic application to target mobile devices using HTML/CSS. Which is the best solution in order to reuse most of the html but having the visual style for each mobile platform? Which will be the best css/framework to use in this case (preferably free)?

Thanks in advance.

Imponderable

Answer 1

As you said "but having the visual style for each mobile platform?" I understand you are searching for a native look in the apps. the other answers are good frameworks however unless you want to spend time tweaking css they will not look similar to a native UI (visually).

I have worked with Twitter bootstrap and jQM. So far so good but for a native UI look I will go for the following options which I think are the best. These are my top choices after spending a considerable time looking for a jQM alternative as I am not really happy with it in specific aspects.

EDIT: I am adding two new options based on my experience and what I have found so far (ionic and onsen ui).

Ionic Framework

http://ionicframework.com/

Intended to develop hybrid app using Angular JS is a really gem. I have been working with it and it has really helped me to develop faster than when using jQuery.

It also was UI elements that you can use out of the box and they are styled properly for iOS and Android although I think its style is more iOS-lish.

Pros

• Angular JS based framework
• Speed up the development process because of angular JS powers
• Very well documented and a lot of examples and tutorials and recipes.
• You could use the CSS without using angular if it is required
• Free and open source
• theming is done via CSS or SASS
• Enough components out of the box to start building and app.

Cons

• Maybe reading the ionic documentation and the Angular ties if you want to enjoy all of its powers, but it worth it.

Onsen UI

http://s.onsen.io/

I have not work yet with it but it looks like a really complete UI option for hybrid apps.

Pros

• Work with Angular and jQuery was well
• Free and Open SourceFree and Open Source
• It has a theming tool which make easier to customize the look in case you are afraid of CSS or SASS.

Kendo UI mobile

http://www.kendoui.com/mobile.aspx

Pros

• It help you create a native look with already native UI looking elements for Android, iOS, Windows Phone, BB.
• Incorporates an MVC framework
• Theming machine like jQM theme roller
• Looks solid (I am looking forward to use it soon)
• jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.

Cons

• It is not free for commercial use.

PhoneJS

http://phonejs.devexpress.com

Pros

• jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
• Optionally support Knockout.js for MVVM user interface development

Cons

• Seems like its community is far less reduced in comparison with kendo, so I am not sure how much people are out there using it and that could help later.
• It is not free for commercial use.

Chocolate chip UI

http://chocolatechip-ui.com

Pros

• iOS 7, Android Jelly Bean and Windows Phone 8 UI looking
• Open Source and the project looks active
• jQuery compatible
• ChocolateChip-UI uses its own JavaScript library, ChocolateChip, for DOM manipulation, Ajax requests, etc. It is very similar to jQuery. (they claim have better performance than jQuery and Zepto)

Cons

• Doesn´t seems that have a wide community out there

Steroids

http://www.appgyver.com/steroids

If you feel like a adventure explorer take a took at steroids, which is cordova compatible and they claim you UI will perform as well as native. It is quite new, I haven´t give it a try but I seems promising, however as still is not widely used I did not decided to use it as having a lot of people using it is helpful when you face problems.

NOTE: If other have interesting alternatives to experiences with this or other UI frameworks for cordova/phonegap please share!

Silurid

Nice info! I will take a look, tx!! – Imponderable

Finally which one you decided to go for? If the information was useful consider voting or accepting the answer so other people could benefit. – Silurid

Are you sure that Kendo is not free for commercial use? I couldn't find that in a license text. – Okubo

The have changed their products and license and.now there is a kendo ui mobile open source version for both comercial and non-comercial apps. – Silurid

Answer 2

My suggestion would be jQuery Mobile which supports almost all mobile devices in the market.

For the list of supported devices: http://jquerymobile.com/gbs/

1) It provides a native feel for each device platform. 2) Supports all platform 3) Easy support and 3rd party plugins

It's been said by some that jQuery mobile might be slow.. but you can tweak its settings to make it good.

Felicafelicdad

Quite a few months ago we started a new project and considered all of the options listed above for a client side framework. We were looking for a large set of mobile-optimized UI widgets. A widget catalog was more important to us than whether the framework provided an MV* architecture, so tools like AngularJS, MeteorJS and EmberJS were secondary. We found jQueryMobile as the best option for us. Bootstrap, Ionic, Kendo, Sensa, etc. don't seem to have as many and varied out-of-the-box widgets specifically for mobile. So far I think we made the best decision for our use case. – Beverle

Answer 3

You could use Onsen UI. It claims to be faster than jQuery and has its own theme roller and is built to be compatible with PhoneGap/Cordova.

Kex

Answer 4

try you using twitter bootstrap, http://getbootstrap.com..
might be a solution for you, because twitter bootstrap is framework for html and responsive code for all device,, check resolution web in http://quirktools.com/screenfly.. and you can convert web with phonegap..

Bigley