JQuery framework

JQuery is the most popular JavaScript framework because of it's lightweight, "write less, do more" cabability and a lot of powerful features to create robust websites. It extends a lot of cababilities in HTML elements. It can be setup in two ways. Method one is to download JQuery from the official website jquery.com, unzip it and point in source code as below. And, the second method is to include CDN url in script source. To use other JavaScript frameworks like Bootstrap, you must include JQuery library.

Method 1
<script src="jquery.js">  </script>
Method 2
<script src="//code.jquery.com/jquery-1.11.3.min.js">  </script>	

Bootstrap Setup

Bootstrap is one of the most popular responsive front end development framework built on HTML, CSS and JS which helps to build mobile friendly web projects. With a single code base, Bootstrap easily and efficiently scales websites and web applications which ranges from small smart phones to tablets to desktops with the use of CSS media queries. It comes with precompiled CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Like Jquery and other JS frameworks, you can configure Bootstrap in two ways, however in Bootstrap you have to include both CSS and JSS files.

Method 1
<link rel="stylesheet" src="bootstrap.min.css"  < />
or
 <link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
Method 2
<script src="bootstrap.min.js">  </script>
or
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
Include CSS file on header section before your stylesheet and JS files before body tag ends and include Bootstrap.min.js file after JQuery library.

Modernizer JS Library

Modernizer is a small Javascript library which detects HTML5 and CSS3 tags, which are not supported by browsers and then allows developers to test for unsupported new features and provide fallbacks for them. For example, if a browser does not support audio feature, then you can display a simple page, by creating CSS rules based on available features. Then, if browser does not support a new feature, CSS rules created would apply automatically on the webpage. You can implement modernizer in few steps. You can either download, unzip, save in the folder where your website files and link as below in header section of html file.

<script src="modernizr.min.js" type="text/javascript"></script>

Font Awesome

Font Awesome Font Awesome is free iconic and CSS toolkit which provides scalable vector icons, which means icons will not lose any quality even they are used in different devices. And, the most beauty part of CSS is they are compatible to all most all frameworks and also compatible to screen readers, even though it was originally developed for Bootstrap.

Go to Font Awesome link, download, unzip and find the minimized version inside CSS file, if you are using for production purpose. For development purpose, you can non-minimized version, and write src code in header of html file. You can also use BootstrapCDN.
<link type="text/stylesheet" src="css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
Check the latest version from Font Awesome Getting Started page .
  • Subscribe Mileytech

Useful links