Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Twitter Sign In with OpenID Sign In with Google

Sign In Sign Up

Categories

In this Discussion

Tagged

Jo Home Page
GitHub Repo
Welcome to the Jo support forums! Please Sign Up and join in the discussion. You can also Sign In instantly with Twitter, OpenID or your Google ID.
Recommended methods of customizing/skinning an app??
  • jpsheridanjpsheridan April 2012
    Posts: 35

    Hello all,

    This is my first post so please go easy on me ;)

    I've been tasked with creating web app (possibly to be a phonegap project but at first it'll be a webapp) targeting IOS first, then Android.  Preferably the two.  So I've been looking around at the various HTML5 cross platform frameworks.  Frameworks like Sencha, the-m-project and wink but I feel there a little heavy for what I need.  Basically it's a webapp/phoneapp version of a customer account (doesn't matter what type of customer). Basically I need a branded app with the following:

    1. Branded splash

    2. Login Screen

    3. A few static details screens

    4. Transactions Screen that will need scrolling as it will be a long table of data.

    I've drawn some screens on paper and have narrowed my needs to xui or joapp (I think).

    I like the way joapp is a "programmers" framework, xui is more traditional like jQuery but I wonder can it be more surgical because I will have to create alot of the HTML and boiler plate code myself thus (although more difficult to conceive and produce) making the job more custom.

    Anyway what is the best practice for skinning an app.  From what I can see there are a few methods:

    1. Override joapp's styles in the javascript code. E.g.

    // joInput.prototype.tagName = "input";
    // joInput.prototype.className = "stuff";

    2. Completely customize jo2.css and change styles in there

    3. Add a custom css after linking jo2.css which will contain overriding styles for jo components.

    I'm a novice and I'm a little uncertain how to go about all this.  Any help would be appreciated.

    Thanks,

    JP

  • jpsheridanjpsheridan April 2012
    Posts: 35

    BTW I'm not looking to make this native looking hence my question regarding skinning.  We work with a designer (print designer, wish he knew more about web) who has branded the company and will be involved in this app.

    Cheers,

    JP

  • davedave April 2012
    Posts: 415

    I use a couple methods. One way is to prototype your UI elements using straight HTML, with the jo2.css as your starting point. Advantage here is you can work with a static HTML file without messing with your application code while you perfect the CSS. Another way is to get your app working, at least a prototype, and use a product like CSSEdit, which lets you make changes live to your CSS (it uses a Safari webkit inside its app window to let you visually tweak things). I've had great results with both strategies, though I'm preferring the 2nd (it's what I used to make jo2.css based on the original jo.css, took about 2hrs).

    Dave Balmer, Jo Code Wrangler
  • jpsheridanjpsheridan April 2012
    Posts: 35

    Hi,


    Thanks a million Dave.  I guess segregating the CSS from the app is the way to go.

    So could I link jo2.css, and add my own modified file after words with whatever overrides I need?  Sounds like a good option.

    Cheers,
    JP
Add a Comment