Custom CSS for Mobile Development Using Phonegap/Cordova

Custom CSS for Mobile development using Phonegap/Cordova

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!

what is difference between phone gap and mobile web site?

@axis does point out a viable third option I'm sure you've already considered, and if you're capable, I would recommend writing native apps in most situations. However; If you wanted to reach the maximum number of customers with your app using this approach you have the burden of having to know/learn different languages for different devices. This makes HTML/CSS/Javascript very inviting, especially when these three are the most commonly used technologies on the web today.

So, getting back to the question:

Phonegap and Mobile Websites:

• Both use HTML/CSS/Javascript
• Both can be optimized for mobile devices with frameworks like JQuery Mobile or Sencha
• Both can use web services for content integration
• Both can use local data storage.

Phonegap:

• Can be placed on the Market for others to find and install your app on their device.
• Resides on the device and can use it's hardware (camera/gps/accelerators/etc.) much like a native application.
• Can be expanded (through plugins) to work with native device code if the need were to arise.

Mobile Website:

• You control the deployment of the app via your web server. (e.g. you can make a change and it takes effect immediately across all devices.)
• Less dependent on web services for including database content
• You can take advantage of PHP/Python/ASP and other web design technologies that produce the HTML/CSS/Javascript for you.

And I'm sure that this list is in no way a complete list of differences between the two, but I hope I hit the highlights...

Is there is any specific question you still have?

jQuery Mobile not working in PhoneGap Windows Phone 8

jQuery Mobile does not support Windows Phone 8 officially. See the supported platforms: http://jquerymobile.com/gbs/

Re-use the Phonegap Cordova mobile app code for web application

Yes, I've developed some hybrid apps based on Ionic Framework and also corresponding web apps reusing up to 90% of codebase.

The webapp projects share almost all the Angular modules, in particular services and directives, with hybrid app projects.
Some functionalities and mobile-specific features are wrapped in a module different for hybridand for webapp projects.

For example I have a wrapper.ionic.js used in hybrid (Ionic) projects which contains for example this factory:

angular.module('components.wrapper', [])
.factory('$myPopup', ['$ionicPopup', function($ionicPopup) {
    var scope = {};

    scope.alert = function (params) {
        return $ionicPopup.alert(params);
    }

    scope.show = function (params) {
        return $ionicPopup.show(params);
    }

    scope.confirm = function (params) {
        return $ionicPopup.confirm(params);
    }

    return scope;
}])
...

The counterpart for webapp projects is wrapper.bootstrap.js (based on https://angular-ui.github.io):

angular.module('components.wrapper', [])
.factory('$myPopup', ['$modal', function($modal) {
    var scope = {};

    scope.animation = true;
    scope.size = 'sm';          // values: '', 'lg', 'sm'

    scope.alert = function (params) {
        var alert = $modal.open({
            animation: scope.animation,
            size: scope.size,
            backdrop: true,
            template:
              '<div class="modal-header"><h4 class="modal-title '+params.cssClass+'">'+params.title+'</h4></div>' +
              '<div class="modal-body '+params.cssClass+'">' +params.template + '</div>' +
              '<div class="modal-footer"><button class="button button-positive" type="button" ng-click="cancel()">Ok</button>' +
              '</div>',
            controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }],
            controllerAs: 'ctrl'
        });
        return alert;
    }
...

So you can use both in hybrid and webapp the service $myPopup.

Regarding HTML (index and view templates) the situation is more complex. Many of the Ionic tags (directives and CSS) are mobile friendly but not optimize for webapps which can be seen from desktops.
Here I have used both Ionic tags and UI Boostrap, but with preference for the second one.

---

Related Topics