Skip to content
Permalink
Newer
Older
100644 130 lines (92 sloc) 3.83 KB
Oct 31, 2016
1
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
2
table of contents](TOC.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))
14
5. Deploy your site.
15
16
17
## Basic structure
18
19
A basic HTML5 Boilerplate site initially looks something like this:
20
21
```
22
.
23
├── css
24
│ ├── main.css
25
│ └── normalize.css
26
├── doc
27
├── img
28
├── js
29
│ ├── main.js
30
│ ├── plugins.js
31
│ └── vendor
32
│ ├── jquery.min.js
33
│ └── modernizr.min.js
34
├── .editorconfig
35
├── .htaccess
36
├── 404.html
37
├── apple-touch-icon.png
38
├── browserconfig.xml
39
├── index.html
40
├── humans.txt
41
├── robots.txt
42
├── crossdomain.xml
43
├── favicon.ico
44
├── tile-wide.png
45
└── tile.png
46
```
47
48
What follows is a general overview of each major part and how to use them.
49
50
### css
51
52
This directory should contain all your project's CSS files. It includes some
53
initial CSS to help get you started from a solid foundation. [About the
54
CSS](css.md).
55
56
### doc
57
58
This directory contains all the HTML5 Boilerplate documentation. You can use it
59
as the location and basis for your own project's documentation.
60
61
### js
62
63
This directory should contain all your project's JS files. Libraries, plugins,
64
and custom code can all be included here. It includes some initial JS to help
65
get you started. [About the JavaScript](js.md).
66
67
### .htaccess
68
69
The default web server configs are for Apache. For more information, please
70
refer to the [Apache Server Configs
71
repository](https://github.com/h5bp/server-configs-apache).
72
73
Host your site on a server other than Apache? You're likely to find the
74
corresponding server configs project listed in our [Server Configs
75
](https://github.com/h5bp/server-configs/blob/master/README.md) repository.
76
77
### 404.html
78
79
A helpful custom 404 to get you started.
80
81
### browserconfig.xml
82
83
This file contains all settings regarding custom tiles for IE11.
84
85
For more info on this topic, please refer to
86
[MSDN](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx).
87
88
### .editorconfig
89
90
The `.editorconfig` file is provided in order to encourage and help you and
91
your team to maintain consistent coding styles between different
92
editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig).
93
94
### index.html
95
96
This is the default HTML skeleton that should form the basis of all pages on
97
your site. If you are using a server-side templating framework, then you will
98
need to integrate this starting HTML with your setup.
99
100
Make sure that you update the URLs for the referenced CSS and JavaScript if you
101
modify the directory structure at all.
102
103
If you are using Google Universal Analytics, make sure that you edit the
104
corresponding snippet at the bottom to include your analytics ID.
105
106
### humans.txt
107
108
Edit this file to include the team that worked on your site/app, and the
109
technology powering it.
110
111
### robots.txt
112
113
Edit this file to include any pages you need hidden from search engines.
114
115
### crossdomain.xml
116
117
A template for working with cross-domain requests. [About
118
crossdomain.xml](misc.md#crossdomainxml).
119
120
### Icons
121
122
Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple
123
Touch Icon with your own.
124
125
If you want to use different Apple Touch Icons for different resolutions please
126
refer to the [according documentation](extend.md#apple-touch-icons).
127
128
You might want to check out Hans' handy [HTML5 Boilerplate Favicon and Apple
129
Touch Icon
130
PSD-Template](https://drublic.de/blog/html5-boilerplate-favicons-psd-template/).
You can’t perform that action at this time.