usage

Usage

Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app usually involves the following:

1. Set up the basic structure of the site.
2. Add some content, style, and functionality.
3. Run your site locally to see how it looks.
4. (Optionally run a build script to automate the optimization of your site - e.g. ant build script or node build script).
5. Deploy your site.

Basic structure

A basic HTML5 Boilerplate site usually looks something like this:

|-- css
|-- img
|-- js
`-- .htaccess
`-- humans.txt
`-- robots.txt
`-- favicon.ico
`-- [apple-touch-icons]
`-- index.html
`-- 404.html

This is an overview of each major part:

.htaccess

The default web server config is for Apache.

index.html

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.

Make sure that you update the URLs for the referenced CSS and JavaScript if you modify the directory structure at all.

If you are using Google Analytics, make sure that you edit the corresponding snippet at the bottom to include your analytics ID.

404.html

A helpful custom 404 to get you started.

css

The directory should contain all your project's CSS files. By default, the project includes some starting CSS to help you get started. You can either add your project styles to style.css where it is marked, or use additional CSS files. If you decide to use extra CSS files, please read the Build script documentation to find out how you can have these files concatenated into a single file for production use.

js

This directory should contain all your project's JS files. Libraries, plugins, and custom code can all be included here. The plugins.js file is a useful place to add any plugins that you need, and scripts.js is meant to contain your site/app-specific JS code.

Community guides to HTML5 Boilerplate

Here are some excellent starter guides written by developers in the community. The give you a helpful overview of various features (sometimes of earlier versions of the project) and how to best use them.

• Getting started with HTML5 Boilerplate