Customizability or expressive freedom with Ionic


I am thinking about rewriting a somewhat older app written in Action Script 3 / Adobe AIR to Js / HTML 5. I have worked with phonegap before and i liked it very much. However, when using a framework like Ionic, i wonder what our ‘visual expressive freedom’ is in the following sense.

  • I understand that Ionic provides out of the box a set of rich user interface elements, i’ve also seen them work in Ionic’s impressive app showcase (downloaded and twiddled around with them). However, most, if not ALL of them look the same… this leads me to think that:
  • It is either: use Ionic’s GUI elements that provide great usability behaviour, OR roll your own entirely which means you have to also write the element behaviours (history management, view management, etc. etc. all the usual mobile development patterns)

My question: are my assumptions and my conclusion valid?

So, what is the degree of freedom in changing how Ionic elements look like? can we change the ‘guts’ of components? If yes, awesome, if not (more interesting), why not and what would be your solution if you, for example, would want GUI elements with a graphic texture instead of a solid / transparent color?

Thanks for replying!

Incorrect assumption.

Ionic provides an out of the box skin so you have something to start with, however, you have to remember it is all just HTML/CSS. You can override anything. Infact, Ionic is purposefully made to be easily skinable, provided you are willing to put in the time to roll the skins yourself.

As an example, an app I am involved with looks like this on iOS:

However, on Android it looks like this:

And on BlackBerry like this:

For the most part, these are all using the out of the box Ionic components. The only exception is that we abstracted the Android Action Bar into a directive to make it easier to maintain and we’re working on abstracting the BlackBerry back button as well.

So, in summary, you can create a completely customized app based on Ionic with just a bit of CSS knowledge using an override stylesheet.

Thanks for your reply.

The android screenshot doesn’t work for me though?

Weird. Try looking at the screenshots here: (google play link)

Hmm when i try that, it says no devices eligible to install. I ‘own’ 3 android devices, one running 4.4.3, one 4.2.2, one 2.3.5. But i’ve taken a look at how the app looks. Although it looks great (and customized), i actually meant working with bitmaps or images at least.
Think of ‘skinning’ an application using bitmap files, is there any example of an app built with Ionic that does this?
For example using css images, regular, @2x, @3x