When you begin development, it is always critical to start with a basic framework that can be molded to the needs of your project. In many cases, we develop these frameworks in-house where we work, or perhaps for our own personal projects. However, the open source community has presented us with a great framework we can use in our projects—the HTML5 Mobile Boilerplate. This framework is based on the well-known HTML5 Boilerplate, and has been optimized for mobile including a lean HTML template; the utilization of Zepto, and use of tools and helpers optimized for mobile.
The first step we need to take is to download the HTML5 Mobile Boilerplate, which is located here:
http://html5boilerplate.com/mobile/
Once the boilerplate is downloaded, you should see the following structure from the unzipped archive file:
The Preliminary Directory Structure
The next step is to take these files and place them in the directory of your choice. For example, I have placed my files in the following directory on my Mac:
/Users/alvincrespo/Sites/html5iphonewebapp
Next, we'll want to use a build system that helps us create multiple environments, ease the deployment process, and overall make things easier when we want to optimize our site for testing and/or production.
According to the documentation for the HTML5 Mobile Boilerplate, there are two different types of build system, such as the Node Build script and the Ant Build script. In this book, we'll be using the Ant Build script. I would recommend using the Ant Build script since it has been around for a while and has the appropriate features that I use in my projects, including CSS Split, which will help split up the main CSS file that comes with the boilerplate.
To download the Ant Build script, go to the following link:
https://github.com/h5bp/ant-build-script
Then, download the zip file by clicking on the Download as zip button. When you have downloaded the Ant Build script, copy the folder and its contents to your project.
Once your Ant Build script directory is fully transferred over to your project, rename the directory containing the build script to build. At this point, you should have your project completely set up for the rest of the applications in this book. We will cover how to utilize the build script later on in this chapter.