<pclass="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div>
</div>
</div>
<divclass="container">
<divclass="column-group">
<divclass="column lg-units-8 docs-content">
<divclass="docs-section">
<h2>Quick start</h2>
<pclass="lead">Quickly get up and running with a Ratchet app.</p>
<h3>1. Create your pages</h3>
<p>Use the <ahref="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <ahref="#pageLayout">basic page template</a> and <ahref="/examples">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p>
<h3>2. Connect pages with push.js</h3>
<p>Read about <ahref="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating touch events. <ahref="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events">Check out this tutorial on emulating touch events in Chrome</a> (<ahref="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">or Firefox</a>) if you're not sure how to do that.</p>
<h3>3. Save the app to your phone</h3>
<p>There are <ahref="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <spanclass="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <ahref="https://developers.google.com/chrome/mobile/docs/installtohomescreen">this guide</a>.</p>
</div>
<divclass="docs-section">
<h2>What's included</h2>
<pclass="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<h3>Precompiled Ratchet</h3>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p>
<h3>Ratchet source code</h3>
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
</div>
<divclass="docs-section">
<h2>Page setup</h2>
<pclass="lead">Three simple rules for structuring your Ratchet pages</p>
<h3>1. Fixed bars come first</h3>
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p>
<h3>2. Everything else goes in <code>.content</code></h3>
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
<h3>3. Don't forget your meta tags</h3>
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important for Ratchet to work just right.</p>
</div>
<divclass="docs-section">
<h2id="pageLayout">Basic template</h2>
<pclass="lead">Use this basic template to get your app started.</p>
<spanclass="nt"><p</span><spanclass="na">class=</span><spanclass="s">"content-padded"</span><spanclass="nt">></span>Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:<spanclass="nt"></p></span>
<pclass="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<ol>
<li>
<p>Read and subscribe to <ahref="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
</li>
<li>
<p>For help using Ratchet, ask on <ahref="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
</li>
<li>
<p>Start a discussion on the <ahref="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
</li>
</ol>
<p>You can also follow <ahref="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
</div>
</div>
<divclass="column lg-units-4">
<divclass="docs-module">
<h4class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<pclass="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div>
</div>
</div>
<divclass="container">
<divclass="column-group">
<divclass="column lg-units-8 docs-content">
<divclass="docs-section">
<h2>Quick start</h2>
<pclass="lead">Quickly get up and running with a Ratchet app.</p>
<h3>1. Create your pages</h3>
<p>Use the <ahref="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <ahref="#pageLayout">basic page template</a> and <ahref="/examples">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p>
<h3>2. Connect pages with push.js</h3>
<p>Read about <ahref="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating touch events. <ahref="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events">Check out this tutorial on emulating touch events in Chrome</a> (<ahref="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">or Firefox</a>) if you're not sure how to do that.</p>
<h3>3. Save the app to your phone</h3>
<p>There are <ahref="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <spanclass="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <ahref="https://developers.google.com/chrome/mobile/docs/installtohomescreen">this guide</a>.</p>
</div>
<divclass="docs-section">
<h2>What's included</h2>
<pclass="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<h3>Precompiled Ratchet</h3>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p>
<h3>Ratchet source code</h3>
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
</div>
<divclass="docs-section">
<h2>Page setup</h2>
<pclass="lead">Three simple rules for structuring your Ratchet pages</p>
<h3>1. Fixed bars come first</h3>
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p>
<h3>2. Everything else goes in <code>.content</code></h3>
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
<h3>3. Don't forget your meta tags</h3>
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important for Ratchet to work just right.</p>
</div>
<divclass="docs-section">
<h2id="pageLayout">Basic template</h2>
<pclass="lead">Use this basic template to get your app started.</p>
<spanclass="nt"><p</span><spanclass="na">class=</span><spanclass="s">"content-padded"</span><spanclass="nt">></span>Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:<spanclass="nt"></p></span>
<pclass="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<ol>
<li>
<p>Read and subscribe to <ahref="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
</li>
<li>
<p>For help using Ratchet, ask on <ahref="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
</li>
<li>
<p>Start a discussion on the <ahref="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
</li>
</ol>
<p>You can also follow <ahref="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
</div>
</div>
<divclass="column lg-units-4">
<divclass="docs-module">
<h4class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<pclass="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
<pclass="page-description">Once you've downloaded mui, here's what to do next.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="container">
<divclass="container">
<divclass="column-group">
<divclass="column-group">
<divclass="column lg-units-8 docs-content">
<divclass="column lg-units-9 docs-content">
<divclass="docs-section">
<divclass="docs-section">
<h2>Quick start</h2>
<h2>快速体验</h2>
<pclass="lead">Quickly get up and running with a Ratchet app.</p>
<pclass="lead">Quickly get up and running with a mui app.</p>
<h3>1. Create your pages</h3>
<h3>1. 下载Hello mui App</h3>
<p>Use the <ahref="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <ahref="#pageLayout">basic page template</a> and <ahref="/examples">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p>
<p><ahref="http://dcloud.io/hellomui/">点击下载</a> 已打包好的Hello mui 手机app，直接在手机上体验mui的控件UI及能力展示；</p>
<h3>2. Connect pages with push.js</h3>
<h3>2. 创建Hello mui工程</h3>
<p>Read about <ahref="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating touch events. <ahref="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events">Check out this tutorial on emulating touch events in Chrome</a> (<ahref="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">or Firefox</a>) if you're not sure how to do that.</p>
<p>There are <ahref="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <spanclass="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <ahref="https://developers.google.com/chrome/mobile/docs/installtohomescreen">this guide</a>.</p>
</div>
</div>
<divclass="docs-section">
<h2>What's included</h2>
<pclass="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<h3>Precompiled Ratchet</h3>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p>
<h3>Ratchet source code</h3>
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
</div>
<divclass="docs-section">
<h2>Page setup</h2>
<pclass="lead">Three simple rules for structuring your Ratchet pages</p>
<h3>1. Fixed bars come first</h3>
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p>
<h3>2. Everything else goes in <code>.content</code></h3>
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
<h3>3. Don't forget your meta tags</h3>
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important for Ratchet to work just right.</p>
</div>
<divclass="docs-section">
<divclass="docs-section">
<h2id="pageLayout">Basic template</h2>
<h2>快速构建页面</h2>
<pclass="lead">Use this basic template to get your app started.</p>
<spanclass="nt"><p</span><spanclass="na">class=</span><spanclass="s">"content-padded"</span><spanclass="nt">></span>Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:<spanclass="nt"></p></span>
<p>For help using Ratchet, ask on <ahref="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
