Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

usage

krzychukula edited this page · 6 revisions

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. (Run the build script to optimise your site).
  5. Deploy your site.

Basic structure

A basic HTML5 Boilerplate site usually looks something like this:

|-- build
|-- css
|-- img
|-- js
|-- publish
`-- .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.

build

By default, the project includes a powerful Build script to automate various tasks and improve the performance of your website in a production environment.

publish

If you use the build script, it will create a publish directory with optimized versions of all of your site's files. The contents of this file is what should be served to a production server.

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.

Something went wrong with that request. Please try again.