OpenSourceVarsity

pdf icons

Adding Bootstrap CSS Files To An HTML5 Template

Bootstrap.css is best used with an HTML5 template. Let’s start off by taking a look at a recommended, standardized, directory structure that should be used when building any HTML5 webpage template project.

/
 /css
 /html
 /fonts
 /js
 /images
    index.html

There are four folders used:

  • css – will hold all the .css files used with the project
  • html – will hold all the .html files used with the project
  • fonts – will hold different fonts files used with the project example:.woff2, .ttf
  • js – will hold all the JavaScript files used with the project
  • images – will hold all the image files used with the project

NOTE: index.html is the only HTML5 file is placed in the root directory. There are no other files placed in the root directory of the web project.

Code snippet 1 below is the contents of index.html an HTML5 template.

<!DOCTYPE HTML>
<html>
 <head>
 <title>HTML 5  Template</title>
 
 <meta charset="utf-8">
 <meta name="description"  content="">
 <meta name="author"  content="Ivan Bayross">
 
 <!--  linking to style.css. All bootstrap overrides declared here -->
 <link  href="style.css" type="text/css"  rel="stylesheet">
 
 <!-- HTML5 Shim and  Respond.js IE8 support of HTML5 elements and media queries --> 
 <!-- WARNING: Respond.js  doesn't work if you view the page via file:// --> 
 <!--[if lt IE 9]> <script  src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
 </head>

 <body>
 
 <header>
 <a href="#"><img  src="" alt="Insert Logo Here" width="180"  height="90" id="Insert_logo" style="background:  #C6D580; display:block;" /></a>
 </header>
 
 <nav>
 <ul>
 <li><a  href="#">Link one</a></li>
 <li><a  href="#">Link two</a></li>
 <li><a  href="#">Link three</a></li>
 <li><a  href="#">Link four</a></li>
 </ul>
 </nav>
 
 <div  class="container">

  <article class="content">
 <h1>Instructions</h1>
 <section>
 <h2>How to use this  document</h2>
 <p>Be aware that the CSS for these  layouts is heavily commented. 
 If you do most of your work in Design view, have a peek at the code to get tips on  
 working with the CSS for the fixed layouts. You can remove these comments before you launch your site. 
 To learn  more about the techniques used in these CSS Layouts, 
 read this article at Adobe's Developer Center - http://www.adobe.com/go/adc_css_layouts. </p>
 </section>
 </article>
 
 <div class="sidebar1">
 <aside>
 <p> The above links demonstrate a  basic navigational structure using an unordered list styled with CSS. 
 Use this as a starting point and modify  the properties to produce your own unique look. 
 If you require flyout menus, create your own using a Spry menu, a menu  widget from Adobe's 
 Exchange or a variety of other javascript or CSS  solutions.</p>
 
 <p>If you would like the navigation  along the top, simply move the ul to the top of the page and recreate the  styling.</p>
 </aside>
 </div>
 <!-- end .sidebar1 -->

 </div>
 <!-- end .container -->

 <footer>
 <p>This footer contains the  declaration position:relative; to give Internet Explorer 6 appropriate 
 instructions for the footer and cause it to clear correctly. If you're not  required to support IE6, you may remove it.</p>
 
 <address>
 Address Content<br  />
 Address Content<br  />
 Address Content<br  />
 </address>
 </footer>
 
 </body>

</html> 

NOTE: The <!DOCTYPE HTML> as used with HTML5, as well as the use of the <nav></nav>, <section></section> <aside></aside>, <footer></footer> HTML5 tags in the above code snippet.

The HTML5 Template Look & Feel

The look and feel of this HTML5 template is determined by the styling rules contained in an external CSS file named style.css.

style.css is linked to the HTML5 template using <link href=”style.css” type=”text/css” rel=”stylesheet”> in the <head></head> section of this HTML5 template.

The Bootstrap Class Container

class=”container”

NOTE: The use of class=”container” being applied to the div that contains this web page content. This class is defined within bootstrap.css. This class ensures that all webpage content is centered within the display view port, i.e. the Browser window.

For the styling rules of the class container to be correctly applied to the div to which it is applied bootstrap.css
(or bootstrapmin.css) must be bound to this HTML5 template.

Adding booststrap.css ( or bootstrap-min.css ) To The HTML5 Template

The code snippet

<!-- Linking to Bootstrap CSS -->
<link  href="css/bootstrap.css" type="text/css" rel="stylesheet">

Must be added within the <head></head> tags.

NOTE: Copy bootstrap.css (or bootstrap-min.css) from the folder to which it was downloaded and saved earlier on, to the folder /css.

Writing bootstrap.css Overrides

Routinely, some of the styling rules in bootstrap.css, have to overridden to give the HTML5 template its unique look and feel. Do not make changes directly in bootstrap.css, leave its functionality intact. Identify the bootstrap classes or ids, whose styling rules must be overridden. Then define the same classes or ids within style.css.

Override all these styling rules within style.css. Ensure that style.css is loaded after bootstrap.css within the <head></head> section of the HTML5 template, as shown in code snippet 2 below.

Code snippet 2:

    <!--  Linking to Bootstrap CSS -->
    <link  href="css/bootstrap.css"  type="text/css" rel="stylesheet">

    <!-- Linking to  Template/Theme CSS. Declare all Bootstrap overrides in style.css -->
    <link  href="style.css" type="text/css" rel="stylesheet">

NOTE: Any bootstrap class or id placed within style.css and has specific styling rules declared will automatically override the bootstrap styling rules and be applied to the HTML5 template simply because of the cascading nature of CSS styling rules.

The cascading nature of CSS rules means that all styling rules, bound to classes or ids within the last CSS file, will automatically override the styling rules of identical classes or ids declared in CSS files above.

Ensuring Template Responsiveness

NOTE: To ensure that the HTML5 template created and bound to bootstrap.css is indeed responsive remember to include the following code snippet within the <head></head> section of {filename}.html.

<!--  Used to Ensure that the template will be responsive --> 
<meta  name="viewport" content="width=device-width, initial-scale=1.0">

The above code snippet along with the inclusion of bootstrapresponsive.css within the <head></head> section of the HTML5 template ensures that the HMTL5 template will automatically scale when viewed on visual displays of different sizes, i.e. Desktop, Laptop, Note book, Tablet, iPhone, Android smart phone and so on as shown in code snippet 3.

Code Snippet 3:

<head>

<title>HTML 5 Template</title> <meta charset=”utf-8″> <meta name=”description” content=””> <meta name=”author” content=”Ivan Bayross”> <!– Ensuring that the template will be responsive –> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!– Linking to Bootstrap CSS –> <link href=”css/bootstrap.css” type=”text/css” rel=”stylesheet”> <!– Linking to Template/Theme CSS. All Bootstrap overrides declared here –> <link href=”style.css” type=”text/css” rel=”stylesheet”> <!–[if lt IE 9]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> </head>

NOTE: Notice how style.css is loaded last.
style.css will hold all the bootstrap style rule overrides.

Reducing The Time Taken For Bootstrap CSS File Downloads

When bootstrap.zip (i.e. the bootstrap source file) was downloaded from http://getbootstrap.com Two bootstrap CSS files were downloaded along with an appropriate bootstrap JavaScript file. The CSS files were:

  1. bootstrap.css
  2. bootstrap.min.css

Using bootstrapmin.css will help reduce the time taken of the CSS file to download from the webserver as shown in code snippet 4.

Code Snippet 4:

<head>
    <title>HTML 5 Template</title>

 <meta charset="utf-8">
 <meta name="description"  content="">
 <meta name="author"  content="Ivan Bayross">
 
 <!-- Ensuring that the template will be responsive -->
 <meta name="viewport" content="width=device-width,  initial-scale=1.0">

 <!-- Linking to Bootstrap 3 -->
 <link href="css/bootstrap-min.css"  type="text/css" rel="stylesheet">

 <!-- Linking to Template/Theme CSS. All Bootstrap overrides declared here -->
 <link href="style.css" type="text/css"  rel="stylesheet">
 
 <!--[if lt IE 9]> 
 <script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 <![endif]-->
</head>

Adding the JavaScript Libraries Necessary For bootstrap To Function

Bootstrap requires two JavaScript libraries to function correctly. One library is jQuery, the other library is bootstrap.js. The bootstrap.js JavaScript library is downloaded within bootstrap.zip.

Load the JavaScript files as shown in code snippet 5.

Code Snippet 5:

<head>
    <title>HTML 5  Template</title>
 
 <meta charset="utf-8">
 <meta name="description"  content="">
 <meta name="author" content="Ivan Bayross">
 
 <!-- Ensuring that the template will be responsive -->
    <meta name="viewport"  content="width=device-width, initial-scale=1.0">
    
    <!-- Linking to Bootstrap 3 -->
    <link href="css/bootstrap-min.css"  type="text/css" rel="stylesheet">

 <!-- Linking to Template/Theme CSS. All Bootstrap overrides declared here -->
 <link href="style.css" type="text/css"  rel="stylesheet">

    <!--[if lt IE 9]>
 <script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

 <!-- Loading the JS required by Bootstrap -->
    <script src="js/jquery.js"></script> 
 <script src="js/bootstrap.js"></script>
</head>

Let The Template Render First Then Download the JS Files

When JavaScript files are include within <head></head> of an HTML template, then until the JavaScript files are fully downloaded from the webserver, the template will not be rendered in the Browser. Sometimes JavaScript libraries can be large in size. This means that the site visitor can be left looking at a blank web page in their Browser until the JavaScript libraries are downloaded from the webserver fully.

To help avoid this situation consider loading all JavaScript libraries just before the </body> tag in the HTML file as shown in code snippet 6.

Code Snippet 6:

 <!-- Load all JavaScript libraries here so that  the web page is rendered in the Browser -->
 <script  src="js/jquery.js"></script>
 <script  src="js/bootstrap.js"></script>
 
 </body>
</html>

About bootstrap.js

If the webpage template has no Slider, Tabs, Accordion sections, Drop Down Menus, or any template functionality that requires bootstrap.js and jQuery then it is not necessary to load either of the these JavaScript files within the <head></head> section of the HTML5 based template.

The responsiveness of the webpage template can be controlled by either bootstrap.css or bootstrap-min.css. JavaScript does not play any part in ensuring the responsiveness of the webpage template.

A Quick Re-Cap

What we have learned so far.

How to add bootstrap.css and bootstrapresponsive.css to an HTML5 template. Thus ensuring all the functionality, components and styling of bootstrap are included in the HTML5 template.

How to override any bootstrap class or id style rules in style.css.

Load style.css last within <head></head> to ensure that its style rules will override any bootstrap style rule correctly.

Reduce the time for the bootstrap files to download from the webserver by using:

  • bootstrapmin.css

Within the <head></head> section of the HTML5 template.

Which JavaScript libraries are required by bootstrap to function perfectly.

Where to load the JavaScript libraries, i.e. within the <head></head> section of the HTML5 template.

What is the advantage of loading these JavaScript libraries just before the </body> HTML tag.

With adding the bootstrap CSS files and their associated JavaScript libraries we are now poised to begin to use the bootstrap framework to deliver responsive HTML5 templates.

In the next chapter we will first build a non-responsive, HTML5 webpage template.

After completing this exercise we will add the bootstrap framework to this template and test to see how the template behaves as a responsive template.

 

April 5, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X