<p>Does anyone have any good starting points for me when looking at making web pages/sites/applications specifically for viewing on the iPhone?</p>

<p>I've looked at templates like the one <a href="http://blog.wired.com/monkeybites/2007/07/meet-joe-hewitt.html" rel="noreferrer">Joe Hewitt</a> has made, and also seen some templates I can purchase, which I haven't done yet.</p>

<p>I figured someone else had already started on this track and decided that I could probably leech on their newfound knowledge :)</p>

<p>So, does anyone have any pointers? I'm well aware of the problem that the more such a template/framework makes a web app look like a native iPhone app, the more likely I'm going to get into trouble because it just isn't, but for now I want a framework I can start building on, and then in the process figure out how to make it distinctive enough to be perceived as a web app as well as looking like a native iPhone application.</p>

<p>Specifically I'm looking for features like:</p>

<ul>
<li>stylesheets set up, or pointers to how to do them for iPhone</li>
<li>page flipping animation, ie. pick an item in a list, list scrolls out of view to the left and information for item scrolls in from the right</li>
<li>the animation part would have to work with dynamic pages, ie. not just one big page that has divs set up for each sub-item, which at least one such framework had as a sort of quick fix, I would need to have list item picking load the <em>page</em> for that item, and then when loaded, scroll to it</li>
</ul>

<hr>

<p><strong>Edit</strong>: To avoid people reading only the question and answering, before reading my other reply, I'll add my clarification for GPL licensing and similar issues here.</p>

<p>The framework I need to use can not be distributed under a license which would require me to license my own project out under a similar license. The GPL family of licenses allows for exceptions regarding library usage, but this won't apply to this since by necessity, the kind of framework I would need to use would be all source code.</p>

<p>The project can easily accomodate commercial libraries.</p>

<p>Also, I don't need a <em>library</em> or a <em>framework</em> as such, example files that look good and aren't overly obfuscated would be welcome as well.</p>

[{'answer_id': 8776, 'author': 'John Downey', 'author_id': 200, 'author_profile': 'https://Stackoverflow.com/users/200', 'pm_score': 4, 'selected': True, 'text': '<p>I found <a href="http://code.google.com/p/iphone-universal/" rel="nofollow noreferrer">iphone-universal</a> on Google Code the other day. Haven\'t had a chance to try it out but it looks promising.</p>\n'}, {'answer_id': 8778, 'author': 'Lasse V. Karlsen', 'author_id': 267, 'author_profile': 'https://Stackoverflow.com/users/267', 'pm_score': 0, 'selected': False, 'text': "<p>This <em>looks</em> good, but unfortunately it's being licensed under GPLv3, so I'm actually a bit afraid to start looking at that code. The framework I either need to find, or develop if needs be, must be able to be used as part of a commercial program, without having to license the entire program different. Commercial libraries are fine, I just haven't found any I can demo yet, presumably because I could just then steal all the code if I wanted to.</p>\n\n<p>Guess I'll look further, thanks for the link though.</p>\n\n<p><strong>Edit</strong>: Clarification. I'd be fine with the requirement to share the source to the web framework part for the iPhone, if someone wanted it, but since this framework is all source, I'm afraid that incorporating bits of it into an existing web application (to make a <em>skin</em> for iPhone), I'd be making the whole web application liable for GPL license, which is totally out of the question. Even sharing all the files related to the iPhone pages is out of the question, since they will contain proprietary code.</p>\n"}, {'answer_id': 27007, 'author': 'David Wengier', 'author_id': 489, 'author_profile': 'https://Stackoverflow.com/users/489', 'pm_score': 0, 'selected': False, 'text': "<p>I've been mucking around with iUI, and find it quite good, but to be honest I haven't looked at the licencing model, so I've no idea what it is. It is very simple and straight forward though, and works well with ASP.NET MVC.</p>\n"}, {'answer_id': 214400, 'author': 'modius', 'author_id': 10750, 'author_profile': 'https://Stackoverflow.com/users/10750', 'pm_score': 2, 'selected': False, 'text': '<p>The <a href="http://code.google.com/p/iui/" rel="nofollow noreferrer">iUI library</a>, originally from Joe Hewitt, would be a good place to start.  The library is BSD licensed and has no commercial restrictions.</p>\n\n<p>You\'re right in assuming <a href="http://code.google.com/p/iphone-universal/" rel="nofollow noreferrer">iphone-universal</a> is not an option for you -- its actually licensed under Affero GPL which triggers the distribution clause simply by accessing the software over a network which is quite different to standard GPL.</p>\n'}, {'answer_id': 232550, 'author': 'Lee', 'author_id': 31063, 'author_profile': 'https://Stackoverflow.com/users/31063', 'pm_score': 2, 'selected': False, 'text': '<p>QuickConnectiPhone is LGPL so you can use it the way you want.  It has a custom Dashcode project that includes the needed files.  It is highly modular.  It will even let you compile your JavaScript, HTML, and CSS into an installable application if you want.</p>\n\n<p><a href="http://sourceforge.net/projects/quickconnect/" rel="nofollow noreferrer">http://sourceforge.net/projects/quickconnect/</a></p>\n\n<p>For more information you could look at <a href="http://tetontech.wordpress.com" rel="nofollow noreferrer">http://tetontech.wordpress.com</a></p>\n'}, {'answer_id': 397685, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>Try iwebkit</p>\n\n<p><a href="http://iwebkit.net" rel="nofollow noreferrer">http://iwebkit.net</a></p>\n\n<p>Here is a demo:</p>\n\n<p><a href="http://m.iwebkit.net" rel="nofollow noreferrer">http://m.iwebkit.net</a></p>\n'}, {'answer_id': 451326, 'author': 'Chris Karcher', 'author_id': 2773, 'author_profile': 'https://Stackoverflow.com/users/2773', 'pm_score': 2, 'selected': False, 'text': '<p>I\'m currently looking into <a href="http://webapp.net.free.fr/" rel="nofollow noreferrer">http://webapp.net.free.fr/</a>.  Check out the demo <a href="http://webapp.net.free.fr/Demo/" rel="nofollow noreferrer">here</a>.  Compared to the other frameworks mentioned, it has the following advantages:</p>\n\n<ul>\n<li>Under active development</li>\n<li>Active user community</li>\n<li>Has an open license, free to distribute as long as you include the copyright/disclaimer</li>\n</ul>\n\n<p>The last point was really the winner for me.  I\'m looking at building something that will be included in a commercial product, so the other frameworks like iphone-universal and iwebkit (both GPL) weren\'t options.</p>\n'}, {'answer_id': 1732978, 'author': 'Rap', 'author_id': 88373, 'author_profile': 'https://Stackoverflow.com/users/88373', 'pm_score': 2, 'selected': False, 'text': '<p><a href="http://jqtouch.com/" rel="nofollow noreferrer">jQtouch</a> looks outstanding.</p>\n'}, {'answer_id': 9137754, 'author': 'Zungy', 'author_id': 1260447, 'author_profile': 'https://Stackoverflow.com/users/1260447', 'pm_score': 0, 'selected': False, 'text': '<p>Check out <a href="https://web.archive.org/web/20160311073040/http://snippetspace.com/iwebkit6" rel="nofollow noreferrer">iWebkit 6</a>. It works only on iOS 5, though :(.</p>\n\n<h1>UPDATE</h1>\n\n<p>You can also use <a href="https://cache.saurik.com/menes/style.css" rel="nofollow noreferrer">saurik\'s</a>. It doesn\'t have all of the features you said you wanted, but I\'ll try to see how to implement them. Also, you said you wanted to build on it. For a demo (saurik took down the actual good part of cydia.saurik.com) you can use <a href="http://links.bargonaut.com/WebGUI/saurik.html" rel="nofollow noreferrer">mine</a> on my other site.\nTo avoid transferring all those images, just add this in the header:</p>\n\n<p><code>&lt;link rel="stylesheet" type="text/css" href="http://cache.saurik.com/menes/style.css" /&gt;</code></p>\n\n<p>also, add this to your CSS:</p>\n\n<pre><code>body &gt; panel &gt; fieldset &gt; div &gt; a: hover {\nbackground-image: url(\'menutouched.png\')\n}\n</code></pre>\n\n<p>menutouched.png is here:</p>\n\n<p><a href="https://i.stack.imgur.com/XmBr9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XmBr9.png" alt=""></a>\n</p>\n\n<p>This function in js slides the page. It is from Joe Hewitt’s iUI project:</p>\n\n<pre><code>function swipePage(fromPage, toPage, backwards)\n{\ntoPage.style.left = “100%”;\ntoPage.setAttribute(“selected”, “true”);\nscrollTo(0, 1);\nvar percent = 100;\nvar timer = setInterval(function()\n{\npercent += animateX;\nif (percent &lt;= 0)\n{\npercent = 0;\nfromPage.removeAttribute("selected");\nclearInterval(timer);\n}\nfromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%";\ntoPage.style.left = (backwards ? -percent : percent) + "%";\n}, animateInterval);\n}\n</code></pre>\n\n<p>For loading the next page, you could try something like executing a <a href="https://www.tizag.com/javascriptT/javascriptredirect.php" rel="nofollow noreferrer">window.location</a> with a delay. The timing is up to you though.</p>\n\n<p>You also <strong>need</strong> to add this to your CSS:</p>\n\n<pre><code>body {\n-webkit-tap-highlight-color: rgba(0,0,0,0);\n-webkit-user-select: none;\n-webkit-text-size-adjust: none;\n-webkit-touch-callout: none;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/8756', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/267/']