Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app usually involves the following:
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:
The default web server config is for Apache.
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.
A helpful custom 404 to get you started.
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.
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.
By default, the project includes a powerful Build script to automate various tasks and improve the performance of your website in a production environment.
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.
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.