Initializr is a great tool for fast startup of web projects, it is based on HTML Boilerplate, created by Paul Irish and Divya Manian. It helps you to get fast with creating a clean boilerplate, with exactly the features that you need. The author is Jonathan Verrecchia.

Details about the whole process of creating the template and some of the technologies used, read in the text below.

HTML5 Boilerplate

HTML5 Boilerplate is a powerfull and solid ‘master template’ created by Paul Irish, Google and Divya Manian. The template consists of html, css and javascript configuration files, which are in correlation for making very fast and responsive web page, with intent to make the look in all browsers consistent, not meaning the same! It also includes: Modernizr, jQuery and CSS reset2 from Eric Meyer.

Boilerplate also includes many other components, for most people probably not to be used in all projects, but for more specific uses or platforms. Javascript profiling in browsers like Internet Explorer 6 or 7, which do not have that possibility by default, Google analitics, cross domain xml config file for flash, config file for IIS, nginx, apache and appengine … etc

Altogether, you end up deleting all the files that you do not need for a specific project, which usually takes a lot of time, so here is where Initializr comes to help!

Initializr – fast & customized Boilerplate

The idea behind Initializr is to simplify Boilerplate so that everyone in a few clicks can choose the files needed. The code that Initializr generates is based on the original Boilerplate code. Specific parts and options of the whole process are described below.

HTML / CSS

Boilerplate generates an empty start page (index.html) while Initializr generates the basic layout which can help you to get started with the layout. Index page generates basic blocks like: header, footer, navigation bar, one sidebar block (aside) and an example blog page.

Javascript

Boilerplate contains great jQuery framework by default. You can choose how you want it, compressed version, uncompressed or none at all. We would definitely suggest choosing the compressed version.

Compatibility

HTML Shiv:

Modern browsers completly support new features and HTML5 tags, but older IE browsers < ver. 8, need a little help to be capable to ‘understand’ them. This little piece of javascript code is called HTML5shiv. Shiv uses javascript function createElement().

Modernizr:

Modernizr is a script which is used as a sensor for features in the browser. It contains HTMLshiv and sensor detection functions. In page rendering event it adds class names to the html tag, for instance:

< html lang="en" class="js flexbox canvas canvastext webgl no-touch">
...
< /html>

So we can use these classes to build specific and consistent layout for certain browsers in a correct and CSS valid way.

Server configuration

Initilizr gives you the option to include web server files, for most popular web servers. If you use either IIS, apache, nginx or google app engine, you can include optimized versions of config files. It is important to mention that config is preconfigured to remove www from URL part. So if you want it back, do something like this on apache’s .htaccess:

< IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
< /IfModule>

In the end the Download button

When you have selected the components that you want just press the big download button and that’s it, TA-DA!

This is how my archive looks like after selecting and downloading.

TODO.txt ‐ What’s next ?

In the archive there is a TODO.txt file which outlines steps to take after the download, to get started with your project. Don’t forget to change the language code if it’s not english from “en” to yours, create 404 error page …

	.___       .__  __  .__       .__  .__
	|   | ____ |__|/  |_|__|____  |  | |__|______________
	|   |/    \|  \   __\  \__  \ |  | |  \___   /\_  __ \
	|   |   |  \  ||  | |  |/ __ \|  |_|  |/    /  |  | \/
	|___|___|  /__||__| |__(____  /____/__/_____ \ |__|
	         \/                 \/              \/

For those who go futher

Initializr is a lighter version of the original Boilerplate. If you want to expand the knowledge about Boilerplate itself or to get more info about some parts of configuration, and why is this piece of code here ??? questions (that you might ask at some point), take a look at this video from Paul Irish, the author of Boilerplate.

Official pages of HTML5BoilerPlate and Initializr