5 Answers

• Accepted Answer

  Chris

  I've found a solution for this. MacRumors has just published a story on the iPad's 'AdLib' framework, which reproduces native look-and-feel using HTML and CSS. This happens to be very similar to an earlier 'PastryKit' framework described here, here and here, which seems to work almost flawlessly in Mobile Safari on the iPhone.

  In short, if we run Apple's own CSS code from PastryKit through Clean CSS, we can see all of the CSS properties necessary to imitate native UI elements.

  For example, here's the style required to replicate section headers for a grouped table view:

  .pk-table-view.grouped .section>*
  {
      font-family:Helvetica;
      font-size:17px;
      font-weight:700;
      color:#4d576d;
      text-shadow:#fafafa 0 1px 0;
      margin:0;
  }
  

  You can also get copies of the official images used by Apple, such as the pinstripe background for grouped table views and the magnifying glass icon. A zip of all the assets is available here.

  HTH!

• • Delete me -

• Click through the whole document, there is all you need to know about the userinterface

  iPhone Human Interface Guidelines

• Hi Seb

  Thanks for that but there aren't the specifics there i.e. what is the color of the subtitle text, blue/grey? what is the color of the search bar? font sizes are not mentioned anywhere. I'm having to use-trial and error and compared with developing in titanium it's taking ages - if had design specs i'd be so much quicker.

  But I guess that's all there is.

  Chris.

• Hi there James,

  Great find!, many thanks.

  That gives me a further idea because, in Titanium, things like labels also include position info - left/top/etc. we could establish a library of 'standard label-types' somewhere that could be 'copy-paste'ed into code.

  I've been overlaying transparent screenshots from my app with the images from the iPhone UX guidelines pages, and adjusting (by pixel) to reproduce exact styles in Titanium Mobile. This will help speed that process enormously.

  cheer,
  Chris.