2.1 HTML5 Boilerplate

HTML5 Boilerplate is a starter kit for any front-end project. So let's say we have a very simple front-end project. A bunch of HTML files as well as a very simple CSS file. How can we include this starter template which comes with a lot of files into our current set of project? Let's explore that. We will first start with downloading the project right here. So let's open up the zip file, and immediately you will see that it comes with a lot of image files, some markdown files, so that includes some documentation. As well as some files that we can include in our project. The key to tackling HTML5 Boilerplate is to understand each of the components and under each of the file understand each of the parts of the code. So let's do that starting with our HTML file. So currently, I have opened up the HTML file which is really simple. It contains a bunch of header tags, some paragraph tag and a bo, blockquote tag. Next we also have style sheet which is really simple, just the explain class which is under the paragraph. Let's see how we can integrate HTML5 Boilerplate. First, we will tackle index of the HTML. Inside this file, it will already contain a lot of codes. So let's tackle this part by part. Firstly, we will tackle the code that comes before the head tag. This comes with some conditional comments that we can use when coding CSS, especially when targeting older browsers. So that sounds good to me, so why don't we go ahead and copy this into our current project. So I'll replace the DOCTYPE with the code from HTML5 Boilerplate. Next, we have the entire head tag, which I'm gonna copy. And let's paste this inside our current project. All right, so firstly, we, we have to deal with the title. So let's go ahead and copy this here. Next, when we go down, we also see place a favicon and the apple-touch-icons. Now the good thing about HTML5 Boilerplate, guess what? It already comes with these picture files. So I'll just go ahead and transfer them right to our project. So, whenever we have a web application, to make it add to the home screen, these icons can be used. And, of course the favicon is part of this little icon that comes with the browser. Great, so moving on, we also find style sheet, and here we see that two style sheets are linked. One is normalize.css. So, what is normalize.css? It comes with a bunch of styles so that all the elements appear same or consistent across all the browsers. So as indicated in HTML5 Boilerplate, it is good to include it before our own style sheet. So looks like we can go ahead and import the CSS folder. So I'm just gonna go do that. Inside the CSS folder, we also see main.css. Now this comes with HTML5 Boilerplate's own base styles which I highly recommend going through it by reading through the comments. And as we scroll down, we'll come to a section that will say, Author's custom styles. This is exactly where we will include our product specific styles. So I'll just go ahead and refer to my very simple project specific style. I'll copy and paste it right to the main.css. Write something like this. So, looks like we are all set with the CSS, so I'm just gonna go ahead and delete my original file. After integrating the CSS styles from the HTML5 Boilerplate, if you go ahead and refresh it, there you go, you will notice that both the normalized has been applied as well as our own project specific style. So let's just move on and here we will come to the body code, so let me just go ahead and copy all of them. And I'll bring it over to my own project, so let me go ahead and paste it. So let's go through once again part by part. Firstly, you have this conditional comment, so if this is an older browser, it will basically prompt the user to upgrade the browser. Now sometimes, if this is a client project, I will probably not include it so let me just go ahead and delete it. Next is add your site or application content here, uh-huh. So looks like we can go ahead and add this bit of info that we coded previously. And replace it right here. Great, and after that, I can go ahead and delete the rest of my previous code. Next, if we move on, you will see that the script files are placed right at the bottom. And it is also useful to note that there is one script file in the header tag and that is the modernizr. Now Modernizr is a JavaScript framework that is a feature detection tool. So if we are supporting various browser that might not support some of the cutting edge features, Modernizr is a great tool to have. Now for the simplicity of our project, we will not use Modernizr. Next, we will come across some of the script files right at the bottom of the HTML file. Here, we will come across jQuery, so if our project is using jQuery, go ahead and use it. If not, we can just delete it. Now, if you notice one little information there is no http colon. Now, this phenomenon is very well explained by Paul Irish through protocol-relative URL. And, here he kind of explains that if the browser is viewing the current page to HTTPS, or HTTP, it basically prevents the security pop up. Now, we are not using a jQuery for this very simple project, so likewise, we can go ahead and delete it. Next, there is plugins.js and main.js, and as you can see here, it contains some of the console errors in the browsers that lack, lacks a console and the main.js is basically an aim to file where we can code out our project specifics scripts. So it looks like our product doesn't need it, so I'll just go ahead and delete it as well. Lastly, there is the Google Analytics code which is right at the bottom of the page. You can either copy it from the generated code from Google Analytics or you can just use this one and replace the numbers right here. So let me go ahead, select everything and indent so that it looks good. And I'll also go ahead and delete some of the comments which are no longer required. And looks that our HTML page is all done and integrated with the HTML5 Boilerplate code. Now if you come back to the rest of the files in HTML5 Boilerplate, you will notice that there are two files which are Git specific, the version control system. So if you are using Git as the version control system, it's very useful to have a look at these. The first one basically tells us that if we go to the GitHub page, we will find a list of ignore files, and we can pick and choose the ones that are relevant for our project. And similarly, we also have the Git attributes file that basically tells us the attributes that we want to include for this project, it's good to have these two files if you are using Git. Next, there is the 404 page which will come in handy, we can of course customize it according to the style of our project. So I'll go ahead and include it in my project. Next, if you look at the files, a change log, contributing, and the doc folder, these are, basically, for us to understand the HTML5 Boilerplate code. So, basically, we do not have to include these files in our project folder. We also have crossdomain.xml files, if you're external plugins, such as Flash. But I don't think we need it for this project so I will not transfer it. Next, we also have this little fun thing called the humans.txt so let me transfer it first. Humans.txt is a little text file that resides in the root of our project. And it basically lists all the people that are behind this project. An example is GitHub's human.txt file. Lastly, there is also robots.txt which is useful for the search engines. So, looks like we have integrated pretty well, the HTML5 Boilerplate. Why don't we go ahead and look at it in the browser? So there you go, from the looks of it, nothing has changed. But guess what? If you read through in detail, for example, the styles or humans.txt, some of the Git attributes, it already consists of a lot of boilerplate code that will help us get started and speed up our project. As a final note, I will fire up this project through a Apache HTTP Server so let me just copy this into the document root folder. And I am using MAMP to fire up the Apache server. Yup, it appears exactly the same, and let me just fire up the console and you see the Network's tab is loading up a lot of the files. Now if you are using some kind of server, such as Apache, to load your files, well, guess what? HTML5 Boilerplate comes with a handy htaccess file. So let me just go ahead and, copy this over. And notice now with the help of the new htaccess file, when I refresh it, and let's see we access a normalize.css, you see a lot of good stuff being included. For example, we can have, we have the encoding as a gzip, there's also, like, cache control. Everything has been included for you. So if you're using Apache, you can use the htaccess file that already comes with it. And if you are using some other servers, for example, there is, another project under HTML5 Boilerplate called the Server Configs. And inside here, along with Apache, you will see other servers, for example, nginx, lighttpd, or even Google App Engine. So go ahead and explore the GitHub repository for HTML5 Boilerplate for not only the main project, repository, but also some peripheral ones such as the server configs. So that's a little bit about HTML5 Boilerplate. As we saw, it contains a lot of pieces of good code that we can include, but of course, be sure to read through all of them so that we can customize and pick and choose exactly the ones we need for our current project.