Preparing a project template folder

Let's create a folder with the essential files we'll need to launch a project. We'll use the excellent HTML5 Boilerplate (H5BP) for our starting point, folding Bootstrap's files in their appropriate places.

Getting H5BP

Navigate to h5bp.com in your browser, a short link that will redirect you to H5BP's main documentation page. You may download the H5BP files directly from this page or from the linked GitHub project by clicking on the SOURCE CODE tab available at h5bp.com.

Extract the ZIP file and rename the folder to Project Template 1.

Inside this folder, you'll find the file and folder structure as shown in the following screenshot:

Note

If your file system does not show hidden files, you will not see the .htaccess file. In my case, I have used my FTP browser to navigate to my local folder to make the .htaccess file visible.

Deleting unnecessary Boilerplate files

Delete the following folders and files, which are specific only to H5BP:

• The css folder because we'll soon create our own CSS files using LESS

• CHANGELOG.md

• CONTRIBUTING.md

• The doc folder and its contents

Evaluating the Boilerplate .htaccess file

If you have not read about the H5BP's .htaccess file before, you should take a look at the H5BP documentation, which is featured prominently at http://h5bp.com. In addition, the file itself is very well commented. Open it in your editor and read through it. Depending on your hosting setup and the needs of your site, you may or may not need all or a part of what this file does. Part of the purpose of what's in this file is to maximum site performance. Take it seriously, consult wise advice, and decide accordingly. In my case, my hosting provider handles these things, and so I don't need the .htaccess file.

Updating required Boilerplate files

The following files provide standard information about your project. They may be updated and used, if desired, or you may leave them out. It's up to you.

• humans.txt: This file assigns appropriate credits to you, H5BP, Bootstrap, and any other contributors.

• LICENSE.md: Prior to the H5BP license, add your own desired licensing information for the website you'll build with this license. After H5BP's license, add the licensing information for Bootstrap and other libraries that play a significant role in your end product.

• README.md: Update this file to provide a basic orientation to the entire project.

Updating the favicon and touch icons

Remember to replace the Boilerplate's default icon images with your desired images for your project. These include the following icon images:

• apple-touch-icon-precomposed.png

  • For best results across all mobile devices, including high-pixel-density screens, this should be 144px square (or 152px as in the Boilerplate version).

• favicon.ico

  • A 32px square icon image.

Note

Previous versions of the Boilerplate once included as many as six sizes of touch icons. Recently, this strategy was re-evaluated. Because the large icon will be used by all relevant devices, and the performance hit is very very small, it has been decided to reduce development overhead and have only one touch icon. For the discussion, see https://github.com/h5bp/html5-boilerplate/issues/1367#ref-pullrequest-18787780.