Custom CSS for developing mobile phones using Phonegap / Cordova

Question

I plan to use Cordova v3 to develop a generic application for targeted mobile devices using HTML / CSS. What is the best solution to reuse most of the html, but with a visual style for every mobile platform? What would be the best css / framework to use in this case (preferably free)?

Thanks in advance.

Answer 1

As you said, "but with a visual style for every mobile platform?" I understand that you are looking for the look and feel of applications. the other answers are a good framework, but if you do not want to spend time setting up css, they will not look like your own user interface (visually).

I worked with Twitter and jQM downloads. So far, so good, but for my own user interface, I will be suitable for the following options, which I consider the best. These are my best decisions, having spent considerable time searching for an alternative to jQM, since I am not very happy with it in specific aspects.

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

Ionic Framework

http://ionicframework.com/

Designed to develop a hybrid application using Angular JS - a real gem. I worked with him, and it really helped me grow faster than when using jQuery.

These were also user interface elements that you can use out of the box, and they are correctly designed for iOS and Android, although I believe that its style is more iOS-lish.

Pros

• Angular JS-based infrastructure
• Speed ​​up development process due to Angular JS powers
• Very well documented and many examples and guides and recipes.
• You can use CSS without using Angular if necessary.
• Free and open source
• executed via CSS or SASS
• Enough components out of the box to begin assembly and application.

Vs

• You might be reading the Angular ion and bond documentation if you want to use all of its features, but it's worth it.

Onsen User Interface

http://s.onsen.io/

I have not worked with him yet, but it looks like a really complete user interface for hybrid applications.

Pros

• Working with Angular and jQuery was good
• Free and Open SourceFree and Open Source
• It has a thematic tool that makes it easy to customize your appearance in case you are afraid of CSS or SASS.

Kendo UI mobile

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

Pros

• This will help you create your own look with already configured interface elements for Android, iOS, Windows Phone, BB.
• Includes MVC Infrastructure
• An image processing machine, such as a jQM movie
• It looks good (I look forward to it soon)
• jQuery so that you can use all jquery and JS libraries to solve specific problems very easily.

Vs

• It is not free for commercial use.

Phonejs

http://phonejs.devexpress.com

Pros

• jQuery so that you can use all jquery and JS libraries to solve specific problems very easily.
• Optional Knockout.js support for MVVM user interface development.

Vs

• It seems like his community is much smaller compared to kendo, so I'm not sure how many people there use it, and that might help later.
• It is not free for commercial use.

Chocolate chip user interface

http://chocolatechip-ui.com

Pros

• iOS 7, Android Jelly Bean, and Windows Phone 8 UI
• 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 to have better performance than jQuery and Zepto).

Vs

• It seems that there is no general public.

Steroids

http://www.appgyver.com/steroids

If you feel that the adventure guide will take on steroids compatible with cordova, and they claim that the user interface will work just like the native one. This is completely new, I am not trying to try, but it seems to be promising, however, since I have not yet received widespread use, I have not decided to use it, as many people use it when you encounter problems.

NOTE. . If others have interesting alternatives to experience with this or another user interface for cordova / telephone conversation, please share!

Answer 2

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

List of supported devices: http://jquerymobile.com/gbs/

1) It provides an internal perception for each device platform. 2) Supports the entire platform 3) Simple support and third-party plugins

Some said that jQuery's mobile phone may be slow .. but you can tweak its settings to make it nice.

Answer 3

try using twitter bootstrap, http://getbootstrap.com .
may be the solution for you, because twitter bootstrap is an environment for html and responsive code for all devices, checking web permission at http://quirktools.com/screenfly .. and you can convert a web phone with a telephone connection ..

Answer 4

You can use the Onsen user interface . He claims to be faster than jQuery, and has his own theme video and is built to be compatible with PhoneGap / Cordova.