76 lines
4.6 KiB
HTML
76 lines
4.6 KiB
HTML
<p><a href="https://html5boilerplate.com">HTML5 Boilerplate homepage</a> | <a href="TOC.md">Documentation
|
|
table of contents</a></p>
|
|
<h1 id="usage">Usage</h1>
|
|
<p>Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app usually involves the following:</p>
|
|
<ol>
|
|
<li>Set up the basic structure of the site.</li>
|
|
<li>Add some content, style, and functionality.</li>
|
|
<li>Run your site locally to see how it looks.</li>
|
|
<li>(Optionally run a build script to automate the optimization of your site - e.g. <a href="https://github.com/h5bp/ant-build-script">ant build script</a>)</li>
|
|
<li>Deploy your site.</li>
|
|
</ol>
|
|
<h2 id="basic-structure">Basic structure</h2>
|
|
<p>A basic HTML5 Boilerplate site initially looks something like this:</p>
|
|
<pre><code>.
|
|
├── css
|
|
│ ├── main.css
|
|
│ └── normalize.css
|
|
├── doc
|
|
├── img
|
|
├── js
|
|
│ ├── main.js
|
|
│ ├── plugins.js
|
|
│ └── vendor
|
|
│ ├── jquery.min.js
|
|
│ └── modernizr.min.js
|
|
├── .editorconfig
|
|
├── .htaccess
|
|
├── 404.html
|
|
├── apple-touch-icon.png
|
|
├── browserconfig.xml
|
|
├── index.html
|
|
├── humans.txt
|
|
├── robots.txt
|
|
├── crossdomain.xml
|
|
├── favicon.ico
|
|
├── tile-wide.png
|
|
└── tile.png
|
|
</code></pre>
|
|
<p>What follows is a general overview of each major part and how to use them.</p>
|
|
<h3 id="css">css</h3>
|
|
<p>This directory should contain all your project's CSS files. It includes some initial CSS to help get you started from a solid foundation. <a href="css.md">About the
|
|
CSS</a>.</p>
|
|
<h3 id="doc">doc</h3>
|
|
<p>This directory contains all the HTML5 Boilerplate documentation. You can use it as the location and basis for your own project's documentation.</p>
|
|
<h3 id="js">js</h3>
|
|
<p>This directory should contain all your project's JS files. Libraries, plugins, and custom code can all be included here. It includes some initial JS to help get you started. <a href="js.md">About the JavaScript</a>.</p>
|
|
<h3 id="-htaccess">.htaccess</h3>
|
|
<p>The default web server configs are for Apache. For more information, please refer to the <a href="https://github.com/h5bp/server-configs-apache">Apache Server Configs
|
|
repository</a>.</p>
|
|
<p>Host your site on a server other than Apache? You're likely to find the corresponding server configs project listed in our <a href="https://github.com/h5bp/server-configs/blob/master/README.md">Server Configs
|
|
</a> repository.</p>
|
|
<h3 id="404-html">404.html</h3>
|
|
<p>A helpful custom 404 to get you started.</p>
|
|
<h3 id="browserconfig-xml">browserconfig.xml</h3>
|
|
<p>This file contains all settings regarding custom tiles for IE11.</p>
|
|
<p>For more info on this topic, please refer to
|
|
<a href="https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx">MSDN</a>.</p>
|
|
<h3 id="-editorconfig">.editorconfig</h3>
|
|
<p>The <code>.editorconfig</code> file is provided in order to encourage and help you and your team to maintain consistent coding styles between different editors and IDEs. <a href="misc.md#editorconfig">Read more about the <code>.editorconfig</code> file</a>.</p>
|
|
<h3 id="index-html">index.html</h3>
|
|
<p>This is the default HTML skeleton that should form the basis of all pages on your site. If you are using a server-side templating framework, then you will need to integrate this starting HTML with your setup.</p>
|
|
<p>Make sure that you update the URLs for the referenced CSS and JavaScript if you modify the directory structure at all.</p>
|
|
<p>If you are using Google Universal Analytics, make sure that you edit the corresponding snippet at the bottom to include your analytics ID.</p>
|
|
<h3 id="humans-txt">humans.txt</h3>
|
|
<p>Edit this file to include the team that worked on your site/app, and the technology powering it.</p>
|
|
<h3 id="robots-txt">robots.txt</h3>
|
|
<p>Edit this file to include any pages you need hidden from search engines.</p>
|
|
<h3 id="crossdomain-xml">crossdomain.xml</h3>
|
|
<p>A template for working with cross-domain requests. <a href="misc.md#crossdomainxml">About
|
|
crossdomain.xml</a>.</p>
|
|
<h3 id="icons">Icons</h3>
|
|
<p>Replace the default <code>favicon.ico</code>, <code>tile.png</code>, <code>tile-wide.png</code> and Apple Touch Icon with your own.</p>
|
|
<p>If you want to use different Apple Touch Icons for different resolutions please refer to the <a href="extend.md#apple-touch-icons">according documentation</a>.</p>
|
|
<p>You might want to check out Hans' handy <a href="https://drublic.de/blog/html5-boilerplate-favicons-psd-template/">HTML5 Boilerplate Favicon and Apple
|
|
Touch Icon
|
|
PSD-Template</a>.</p> |