An overview of H5BP files

The different files and folders that are a part of HTML5 Boilerplate are explained as follows:

  • index.html: This is the markup that we recommend you start all your HTML pages with.
  • main.css: The styles are located in a single stylesheet known as main.css, found within the css folder.
  • normalize.css: This file is located separately, so that you can use the latest updated version of normalize.css immediately. In production, ideally you should combine both main.css and normalize.css into a single file to ensure minimum number of network requests, so your pages load quicker.
  • doc: This folder contains all the documentation necessary to understand the HTML5 Boilerplate files.
  • img: This folder should contain all the images you will be using to create your website. This is empty to begin with, but you should include all the images you work with here.
  • js: This is the parent folder for all your scripts. HTML5 Boilerplate comes with a set of scripts that make it easier for you to get started. This folder contains the following files and folders:
    • vendor: This folder contains all the script libraries. You get the latest minified and unminified versions of jQuery and a custom build of modernizr. Any other libraries you will be using should ideally go within this folder.
    • plugins.js: All the jQuery plugins that you would be using should be inlined in this file. If you are using a jQuery carousel plugin, you would copy the code to plugins.js.
    • main.js: This will be the file from where you would invoke scripts that run on your page. Taking the example of the jQuery carousel plugin, we will invoke the plugin to run on our pages from this file.
  • 404.html: If you have a page that is not found, then this page can be served. Make sure it has all the information available and uses the same look and feel as other pages in your website.
  • humans.txt: This is a wonderful initiative that allows you to denote who worked on a website (read more about this initiative at humanstxt.org). We highly recommend you use this to indicate your work, and to inform anyone who is curious, whose work it was.
  • crossdomain.xml: This is useful if you would like to have flash files hosted elsewhere to access assets located on the domain where your website will be hosted. You could have a flash audio player from another domain using the files hosted on your website. In this case, you need to carefully choose your cross-domain policy (we will cover this file in detail in Chapter 5, Customizing the server).
  • robots.txt: Search engines use this file to understand which files to index and which not to index.
  • .htaccess: This is an Apache server configuration file specific to your website. Loads of best practices are included by default.
  • favicion.ico: Most browsers use the favicon when you bookmark a page on a website or next to the title of the page on a tab. By using a distinctive identifiable icon, you will be able to make your website stand out and be easy to navigate to.
  • apple-touch-icon-*.png: iOS and Android devices allow websites to be bookmarked to the homescreen of your phone. Both of them use these touch icons to represent your site when it is added to your home screen. Boilerplate comes with a set of icons to identify all the sizes and formats you need to create your icons in.
  • readme.md: The readme has all the license information and a list of features and where to get more information from, on using these files.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset