1 |
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation |
2 |
table of contents](README.md) |
3 |
|
4 |
# Usage |
5 |
|
6 |
Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app |
7 |
usually involves the following: |
8 |
|
9 |
1. Set up the basic structure of the site. |
10 |
2. Add some content, style, and functionality. |
11 |
3. Run your site locally to see how it looks. |
12 |
4. (Optionally run a build script to automate the optimization of your site - |
13 |
e.g. [ant build script](https://github.com/h5bp/ant-build-script) or [node |
14 |
build script](https://github.com/h5bp/node-build-script)). |
15 |
5. Deploy your site. |
16 |
|
17 |
|
18 |
## Basic structure |
19 |
|
20 |
A basic HTML5 Boilerplate site initially looks something like this: |
21 |
|
22 |
``` |
23 |
. |
24 |
├── css |
25 |
│ ├── main.css |
26 |
│ └── normalize.css |
27 |
├── doc |
28 |
├── img |
29 |
├── js |
30 |
│ ├── main.js |
31 |
│ ├── plugins.js |
32 |
│ └── vendor |
33 |
│ ├── jquery.min.js |
34 |
│ └── modernizr.min.js |
35 |
├── .htaccess |
36 |
├── 404.html |
37 |
├── index.html |
38 |
├── humans.txt |
39 |
├── robots.txt |
40 |
├── crossdomain.xml |
41 |
├── favicon.ico |
42 |
└── [apple-touch-icons] |
43 |
``` |
44 |
|
45 |
What follows is a general overview of each major part and how to use them. |
46 |
|
47 |
### css |
48 |
|
49 |
This directory should contain all your project's CSS files. It includes some |
50 |
initial CSS to help get you started from a solid foundation. [About the |
51 |
CSS](css.md). |
52 |
|
53 |
### doc |
54 |
|
55 |
This directory contains all the HTML5 Boilerplate documentation. You can use it |
56 |
as the location and basis for your own project's documentation. |
57 |
|
58 |
### js |
59 |
|
60 |
This directory should contain all your project's JS files. Libraries, plugins, |
61 |
and custom code can all be included here. It includes some initial JS to help |
62 |
get you started. [About the JavaScript](js.md). |
63 |
|
64 |
### .htaccess |
65 |
|
66 |
The default web server config is for Apache. [About the .htaccess](htaccess.md). |
67 |
|
68 |
Host your site on a server other than Apache? You're likely to find the |
69 |
corresponding configuration file in our [server configs |
70 |
repo](https://github.com/h5bp/server-configs). If you cannot find a |
71 |
configuration file for your setup, please consider contributing one so that |
72 |
others can benefit too. |
73 |
|
74 |
### 404.html |
75 |
|
76 |
A helpful custom 404 to get you started. |
77 |
|
78 |
### index.html |
79 |
|
80 |
This is the default HTML skeleton that should form the basis of all pages on |
81 |
your site. If you are using a server-side templating framework, then you will |
82 |
need to integrate this starting HTML with your setup. |
83 |
|
84 |
Make sure that you update the URLs for the referenced CSS and JavaScript if you |
85 |
modify the directory structure at all. |
86 |
|
87 |
If you are using Google Analytics, make sure that you edit the corresponding |
88 |
snippet at the bottom to include your analytics ID. |
89 |
|
90 |
### humans.txt |
91 |
|
92 |
Edit this file to include the team that worked on your site/app, and the |
93 |
technology powering it. |
94 |
|
95 |
### robots.txt |
96 |
|
97 |
Edit this file to include any pages you need hidden from search engines. |
98 |
|
99 |
### crossdomain.xml |
100 |
|
101 |
A template for working with cross-domain requests. [About |
102 |
crossdomain.xml](crossdomain.md). |
103 |
|
104 |
### icons |
105 |
|
106 |
Replace the default `favicon.ico` and apple touch icons with your own. You |
107 |
might want to check out Hans Christian's handy [HTML5 Boilerplate Favicon and |
108 |
Apple Touch Icon |
109 |
PSD-Template](http://drublic.de/blog/html5-boilerplate-favicons-psd-template/). |