|
|
Maxious
|
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/). |
|
|
|
110 |
|