Working with HTML5 Boilerplate
After using Bootstrap framework for various static frontend websites, I laid my hand on HTML5 Boilerplate. Going with the name, HTML5 Boilerplate is a professional front-end template used for setting up projects, creating fast and adaptable sites with little effort and set of HTML5 ready features and elements.
Features of HTML5 Boilerplate
It is an open source project that is perfect for creating cross-browser sites that work with older browsers.
HTML5 Boilerplate prevent starting website design from scratch and missing out the important pieces.
HTML5 Boilerplate is available for download from html5boilerplate.com and is licensed under MIT license for use in any free or commercial product. The source code is available on Github’s URL, which is github.com/h5bp/html5-boilerplate/.
HTML5 Boilerplate comes with a set of files that makes it easy to do cross-browser development.
The single most significant cause of cross-browser compatibilities is the use of incorrect doctype declarations. By using the HTML5 doctype declaration, you are assured that your browsers will render your site in a standard mode.
Getting started with HTML5 Boilerplate
HTML5 Boilerplate can be downloaded in three ways:
· 1.From html5boilerplate.com in full form
· 2. From www.initializr.com
· 3. From Github home page
Downloading from initializr is a stripped version, it allows users to choose the parts needed in the format shown below.
Initializr is an HTML5 templates generator that comes with three options: classic Html5 Boilerplate, Responsive and Bootstrap.
Classic Html5Boilerplate is more or less like a plain template, no sample website included except a paragraph of “Hello world! This is HTML5 Boilerplate.”
Responsive template on initializr deals with various devices used to display site ranging from Mobiles, tablets, laptops, desktop monitors and HUGE desktop monitors.
The downloaded file is extracted and can be renamed, the different types of files and folder in the extracted file are: index.html, css (main.css, normalize.css), doc, img, js (vendor, plugin.js, main.js), vendor (jquery 3.1 min, modernizer 3.5), 404, humans.txt, crossdomain, xml, htaccess, favicon.
Some can be deleted based on individual taste. The only main.css in the CSS folder can be edited to taste.
After all, I used the Bootstrap initializr to design a responsive website. The snippet below was used for designing the navigation bar and the body section that used background-image.
HTML CODE:
<!doctype html><html class="no-js" lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>ICODE startup website</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css"><link rel="stylesheet" href="css/main.css"><script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script></head><body><nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">ICODE</a></div><div id="navbar" class="navbar-collapse collapse"><div id="menu"><ul class="nav navbar-nav"><li><a href="#" id="home">HOME</a></li><li><a href="#">ABOUT US</a></li><li><a href="#">PORTFOLIO</a></li><li><a href="#">TEAM</a></li><li><a href="#">PRICING</a></li><li><a href="#">BLOG</a></li><li><a href="#">CONTACT US</a></li></ul></div></div></div></nav><div id="element-with-background-image"><div class="img-responsive" id="color-overlay"><h2>We Create Beautiful Websites</h2><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p></div></div><section><h3>LITTLE MORE <a href="#">ABOUT US</a></h3><p>Icode gives accurate, beatuful and responsive websites anytime you need one.</p></section>
CSS CODE:
body {padding-top: 50px;padding-bottom: 20px;}.navbar-inverse .navbar-brand{color: #4935b3;font-size: 30px;}.navbar-header a:hover{color: #4935b3 !important;}.navbar-nav{padding-left: 190px;}#home{color: #4935b3;font-size: 16px;}.navbar-inverse .navbar-nav>li>a{color: #ffffff;}#element-with-background-image{position: relative;background-image: url(../img/man.jpg) !important;background-position: center;background-size: cover;background-color: transparent;min-height: 400px;}#color-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #4a4848;opacity: 0.6;}#color-overlay h2{color: #ffffff;font-family: Aharoni !important;font-size: 40PX;text-align: center;padding-top: 120px;}#color-overlay p{text-align: center;}#btn{background-color: #4a4848;}section h3{font-size: 30px;text-align: center;font-family: aharoni;}section a:hover{text-decoration: none;}section p{text-align: center;font-weight: 20px;padding-bottom: 50px;}
Thank you.
