<h2>Welcome to {{projectName}} {{projectVersion}}</h2>
<p>The `{{projectName}}` is a mobile HTML5 framework javascript library, provides a lot of Mobile UI components</p>

<div class="video"><a href="http://youtu.be/ENQBkWwoMpk" target="_blank">Watch the promo video</a><iframe width="560" height="315" src="http://www.youtube.com/embed/ENQBkWwoMpk" frameborder="0" allowfullscreen></iframe></div>
<img src="{{projectAssets}}/img/bottle.png" style="float:left;margin:20px" />

<h2>Show Cases</h2>
 <p><a href="http://m.tw.bid.yahoo.com/"><b>Mobile Auctions</b></a> is the first Yahoo! product adopted with `{{projectName}}`. (released at 2012-12-27)</p>

{{>getting-started}}

<h2>Auto Hide</h2>
<p>If you like to hide browser url bar, you may use `Y.Bottle.init(true);` to initialize. This can help you to gain more client size.</p>

<h2>Mobile Metas</h2>

<p>You should add these meta inside head tags, to make sure mobile device render the page in correct zoom scale, and support iphone web application.</p>

```
{{>device-metas}}
```
<h2>Skins</h2>
<p>You should pick one skin for UI components, and add proper class names in `body` tag:

```
<body class="yui3-skin-sam btHideAll">
```

`yui3-skin-sam` is required by YUI. `btHideAll` is a skin to hide everything and displayed a loading icon before `{{projectName}}` initialized.
`{{projectName}}` provides more <a href="progressive_enhancement.html">skins for progressive enhancement</a>, please read the document for more detail.

<h2>Sample HTML Structure</h2>
<p>Here is a basic HTML structure with one page, one shortcut and one overlay.</p>
```
{{>basehtml-bottle}}
```

<h2>Component User Guides</h2>
<ul>
{{#components}}
 {{#meta}}
 <li><a href="{{name}}/"><b>{{displayName}}</b> - {{description}}</a></li>
 {{/meta}}
{{/components}}
</ul>

<h2>Live Examples</h2>
<dl>
{{#components}}
 {{#meta}}
{{#unless noExamples}}
<dt><a href="{{name}}/">{{displayName}}</a></dt>
<dd>
<ul>
  {{#examples}}
   {{^forTest}}
    {{#unless inherited}}
 <li data-description="{{description}}">
  <a href="{{../../../name}}/{{name}}.html"><b>{{displayName}}</b> - {{description}}</a>
 </li>
    {{/unless}}
   {{/forTest}}
  {{/examples}}
</ul>
</dd>
{{/unless}}
 {{/meta}}
{{/components}}

<h2>Known Issues</h2>
<dl>
 <dt>YUI 3.6</dt><dd>gallery-2013.02.07-15-27 or newer version (Bottle 0.1.7+) can not cowork with YUI 3.6.0-</dd>
 <dt>YUI 3.7</dt><dd>gallery-2012.11.07-21-32 or older version (Bottle 0.1.6-) can not cowork with YUI 3.7.0+</dd>
 <dt>position:fixed</dt><dd>There are some work around in Bottle for position fixed nodes under webkit browsers, please read <a href="position_fixed.html">position fixed issues</a> for detail.</dd>
 <dt>IE support</dt><dd>Only IE 7,8,9,10 is tested and official supported. Windows phone is target to be supported but not tested yet.</dd>
</dl>
