Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app usually involves the following:
A basic HTML5 Boilerplate site initially looks something like this:
. ├── css │ ├── main.css │ └── normalize.css ├── doc ├── img ├── js │ ├── main.js │ ├── plugins.js │ └── vendor │ ├── jquery.min.js │ └── modernizr.min.js ├── .htaccess ├── 404.html ├── apple-touch-icon-precomposed.png ├── index.html ├── humans.txt ├── robots.txt ├── crossdomain.xml └── favicon.ico
What follows is a general overview of each major part and how to use them.
This directory should contain all your project’s CSS files. It includes some initial CSS to help get you started from a solid foundation. About the CSS.
This directory contains all the HTML5 Boilerplate documentation. You can use it as the location and basis for your own project’s documentation.
The default web server configs are for Apache. For more information, please refer to the Apache Server Configs documentation.
Host your site on a server other than Apache? You’re likely to find the corresponding server configs project listed in our Server Configs repository.
A helpful custom 404 to get you started.
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.
If you are using Google Analytics, make sure that you edit the corresponding snippet at the bottom to include your analytics ID.
Edit this file to include the team that worked on your site/app, and the technology powering it.
Edit this file to include any pages you need hidden from search engines.
A template for working with cross-domain requests. About crossdomain.xml.
Replace the default
favicon.ico and Apple Touch Icon with your own.
If you want to use different Apple Touch Icons for different resolutions please refer to the according documentation.
You might want to check out Hans’ handy HTML5 Boilerplate Favicon and Apple Touch Icon PSD-Template.