Technology is changing every day and it is not surprising that the web and mobile development is at its peak. With hundreds or thousands of new projects released on the daily purpose, the basic ideas and concepts remain the same. And, that’s why it is necessary for the developers to reuse most of the application code every time they start up a new application.
The idea of reusability is one of the most important concepts in computer science and frameworks see the most use of the reusability idea.
What is BoilerPlate Code?
In the terms of computer science, boilerplate or boilerplate code is best explained as lines of code that is used in other projects without any change(or minor change). This simply means reusability is at work with 100% success rate.
The Coders are used to re-use the code on the internet, but that’s not known as using boilerplate. Modification and understanding the logic behind the code before using it is necessary for correctly implementing the solution and that takes time and effort.
In case of the boilerplate code, a model generated approach is taken, where automation can be achieved without much change.
What is HTML5 BoilerPlate?
HTML5 Boilerplate is a leading front-end template, developed by hundreds of developers. The result is beautiful starting template for your projects that can solve issues which most of the web developers find themselves starting a new project.
Until and unless, you are building a spaceship code, the chances of utilizing the basic web development conventions are extremely high, which in turn helps you gain valuable time. The saved time can be invested in other more critical functions for the project, making you feel more confident and productive.
With the help of HTML5 BoilerPlate, you can easily kick start your next project to build fast, scalable and fully-functional web app. The community-driven effort of the developers has made HTML5 Boilerplate a reality.
Why use HTML5 BoilerPlate?
I have already mentioned the importance of reusability of boilerplate code, but I would also want to discuss it further before diving deep into some basics of HTML5 Boilerplate.
HTML5 Boilerplate provides you a simple canvas to start with. Current web development is more focused on the agile development and it has become a necessity for the developers to code fast and churn out results. And, this has created more value for the templates and frameworks.
Learning a framework can take some time, but getting yourself familiar with a template (such as HTML5 Boilerplate) will not take more than 2 hours of your crucial time.
Another important reason, why templates are a hit is the fact that programmers are lazy. They don’t like writing the same code again and again. With reusability an important part of their daily work, it is high-time for beginners to start adapting templates and frameworks for their development work.
Downloading the HTML5 Boilerplate
It is always a great idea to download the Boilerplate and walk through the introduction with the code in front of you. This will enable you to learn more and eventually get most out of the HTML5 BoilerPlate.
You can download it from the official website.
Changes in HTML5 BoilerPlate 5.x.0
- Removed support for IE6 and IE7.
- Comes with latest version of jQuery, Modernizer, and Normalize.Css
- Will contain EditorConfig file. To maintain whitespaces and other editing options.
- The 404 page got a new design. Full page design.
- Documentation is improved and Extend and Customize the HTML5 Boilerplate.
For more information about the changes, you can look at the official changelog.
The Content in the Box
HTML 5 BoilerPlate comes with a lot of beautiful parts. Let’s list the important parts of the HTML5 Boilerplate.
- HTML
- CSS
- JavaScript
- Configuration Files
Each component in the package is important and we will go through them one by one. But, before we go forward, let’s look at the file structure of HTML5 Boilerplate.
. ├── css │ ├── main.css │ └── normalize.css ├── doc ├── img ├── js │ ├── main.js │ ├── plugins.js │ └── vendor │ ├── jquery.min.js │ └── modernizr.min.js ├── .htaccess ├── 404.html ├── index.html ├── humans.txt ├── robots.txt ├── crossdomain.xml ├── favicon.ico └── [apple-touch-icons]
The file Structure of the package is self-explanatory, still I will go through them so that you can have good understanding of what HTML5 Boilerplate holds.
- The CSS folder takes care of CSS files. It contains the normalize.css files, which contains all the CSS that is applied to the default project.
- The doc folder contains all the documentation. You can choose to download the HTML5 Boilerplate with the documentation as it is lightweight and will improve the performance of the project. But, for beginners it is advised to download the doc folder as they are new to the front-end templating.
- The JS folder contains the JavaScript files. The main.js file is destined to reference different JavaScript code in your project. On the other hand, the plugin.js is used for adding plugins to your projects — mainly 3rd party JavaScript libraries. The last sub-folder vendor contains other 3rd party library code. Currently, it contains jQuery and Modernizr
- Modernizr: Modernizr is a JavaScript Library which contains HTML5 and JavaScript detection methods. With the help of the library, you can detect the features that the current browser supports and then fire functions accordingly.
- .htAccess : The most important file of HTML5 BoilerPlate is .htaccess file. For the beginners, .htaccess file contains all the server side configuration and tweaks to make the project better. The .htaccess file contains cross-origin configuration, rewrite rules, Iframe cookies, media types, security configuration, web performance configuration such as compression, E-headers and more.
- 404.html is the default 404 error page. You can easily customize it, according to your requirements.
- index.html is the main HTML file. It contains the lot of small tweaks such as .no-js class for checking if the browser JavaSciprt is enabled or not. It also contains Mobile ViewPort for responsive design support. To complement the responsive design, it has favicons and touch icon. The index.html contains the Google CDN for jQuery and if you are building a website, it has all the code for Google universal Analytics.
- humans.txt file is a simple text file that contains the name of all the major contributor to the project. (I love this file.)
- robots.txt contains instructions for the Google bot so that it can crawl the website/project.
- crossdomain.xml — The file contains cross domain policies for granting rules for flash.
- The other files of the package is favicon and apple icons for better user experience.
Features of HTML5 BoilerPlate
With so much to offers, it is really tough to go through each feature of HTML5 BoilerPlate. Let’s discuss some of the key features of HTML5 BoilderPlate.
1. Support for Media Queries: Media Queries plays an important role in the responsive design and the good news is that HTML5 Boilerplate is more focused on mobile first and RWD philosophy.
The CSS files contain the basic media queries for a complete responsive build. This will help you get started with the responsive design.
2. Web Optimization: Optimizing your web application is an important part of the development. HTML5 Boilerplate comes with basic configuration settings in the .htaccess file. With the configuration, basic compression and other web optimization techniques are already present within the package.
3. Basic Icons Support: Every project requires a constant support for the icons such as favicon and HTML5 Boilerplate. It also supports apple icons.
4. The Power of .htaccess: I have already discussed ‘.htaccess ‘ and how it gives control in the hands of the user.
and many more.
Further Resources
If you are interested in learning about HTML5, you can check learnable courses. They are great for starting and provides all the content in one place.
Want to configure HTML5 Boilerplate before downloading. There is a sweet project known as Initializr that takes care of all the pre-configuration. You can also embed bootstrap with HTML5 Boilerplate.
Wrap Up
Quality Front-End templates are rare. With HTML5 Boilerplate, you can easily kick-start your next web project and take advantage of the features of HTML5 Boilerplate. With rapid development a normal phenomenon these days, the importance of frameworks and templates have sky-rocketed.
Has something to add to the topic? Comment below and let us know!
Also, don’t forget to share the article with your peers. They will love to read about the topic.
