Create a Homepage Using Bootstrap Framework and jQuery: Part I

It’s hard to argue that your first impression about someone or something is usually true. It works for people, cars, clothes, and even websites.

Let’s be frank here. When you visit any website, you instantly pay attention to its homepage and decide if you’re going to use it within several secs. Design, usability, and structure matter a lot.

A homepage of any website needs to be visually appealing and simple to use. In this article, I’m going to share my experience on how to create a homepage that incentivizes users to stay on your website. Our website will be used as an example.

Our goal is to design and develop a website that can satisfy the likes and needs of people with different tastes. Thus, on the one hand, we need to make it rather minimalistic, and on the other hand, it has to be high-quality.

How to Select a Development Platform

To work on the project’s layout, we’ve selected HTML and CSS Framework Bootstrap – a Twitter toolkit for development of web pages. It will allow us to develop user-related web pages much easier. Bootstrap Framework features lots of ready-to-use, HTML- and CSS-based templates for creation of forms, buttons, grids, typographics, and much more. We’ve used Bootstrap Framework as a website’s foundation and skeleton to make a responsive website with cross-browser features.

Bootstrap Framework Benefits

1. It saves time. Using multiple templates for design and classes, we can save a lot of time and focus on other development tasks.
2. High speed of operation. Bootstrap’s dynamic templates can be easily adjusted and customized to be used with different gadgets and displays. You won’t have to apply any fixes to the layout.
3. Ease of use
4. Cross-browser features
5. Open source software

To work with icons, we’ve chosen FontAwesome Library. It is somewhat of an iconic font that uses specific symbols instead of characters and figures. You can operate with this iconic font quite similar to ordinary characters, that is, using CSS.

Fontawesome Library Benefits

1. Use of CSS
2. Thanks to arrays, icons are easily adjusted (image quality doesn’t get worse)
3. A single HTTP request instead of several ones for raster images is used
4. Icons are quickly uploadable due to their small ‘weight’
5. Support of multiple browsers, including IE6

As our task is to create a page featuring specific effects (slider, search animations, etc), we’ve selected jQuery as our library of choice. It is perfect when you need to intermingle HTML and JavaScript.

jQuery Library Benefits

1. Facilitates the manipulation of DOM
2. Features dozens of animation effects
3. Supports multiple browsers
4. Supports jQuery modules. You can introduce new features by adding specific modules
5. Ease of use

To develop a slider, we’ve selected a jQuery OwlCarousel plugin. It has lots of advantages but the main are:

1. Ease of use
2. Open source
3. Documentation
4. Updated
5. Free

One of our tasks is also to implement a constant scroll on the first screen, and only then use an ordinary scroll. To do it we’ve decided to use scrollify plugin. It is simple, fast and flexible. Later, it’ll talk a bit about how we’ve used it on our website.

HTML Doc Preparation for Further Use

To fire up all our tools and instruments, we have to set up the environment first. Also, we need to add all the necessary libraries, plugins, etc. We won’t describe the process in detail.

Below, you’ll find the code which demonstrates how to ‘hook up’ all the necessary stylesheets. It is used to stylize all the web page's elements and override the library’s styles.

<link rel="stylesheet" href="{your-path}/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="{your-path}/font-awesome/font-awesome-4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="{your-path}/main.css">

<link rel="stylesheet" href="{your-path}/partials.css">

<link rel="stylesheet" href="{your-path}/owl.carousel/assets/owl.carousel.css">

<link rel="stylesheet" href="{your-path}/header.css">

<link rel="stylesheet" href="{your-path}/home-page.css">

<link rel="stylesheet" href="{your-path}/animate/animate.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script src="{your-path}/bootstrap/js/bootstrap.min.js"></script>

<script src="{your-path}/owl.carousel/owl.carousel.min.js"></script>

<script src="{your-path}/jquery.scrollify.min.js"></script>

<script src="{your-path}/main.js"></script>

As seen from the code above, I’ve added all the necessary libraries. All the stylesheets are added in <head>. All jQuery libraries, plugins (and our file with code) are added in the very end of the doc’s body.

Now, I’d like to specify some tasks for me and my team. We have to implement lots of effects, animations, tweens, and so on. So, here are some of them:

1. To create a full-screen slider for the first screen (see image 1). There should be three slider screens in total. They will have buttons and special effects (fadeIn and fadeOut). Based on the display’s dimension, the slider will be destroyed and then assembled anew.
2. To develop an animated search field. The effect has to be applied when it is opened or closed. When a user tries to search for anything on the website, a special module window will be opened (full screen mode). (see image 2)
3. To ensure that the first slider will be automatically scrolled down to the next section (an ordinary slider section).
4. To make sure that sections are scaled up when a user hovers over them. A tab with a corresponding description should pop up. (see image 3)

Image 1

Image 2

Image 3

Task 1

As I’ve described above, we will use OwlCarousel to create our sliders. This plugin is very easy to install and set up. You can find its documentation here.

HTML for out slider will be the following:

<div class="owl-carousel background-slider">

<div class="background-move item" style="background-image: url('../assets/images/add-offer-bg.jpg');background-size: cover;">


  </div>

</div>

It is clear from the code above that out slider has the following structure:

1. A block class to call out the slider
2. A block class with item to store the slider’s content (text, background, elements)

Pay attention that item class features inline styles background-image and background-size. These styles are responsible for changing backgrounds for three sliders. Meanwhile, background-size allows us to stretch an image to fit the whole area of effect.

After we’ve created the slider’s structure, we need to call it out. You can do it using the code below:

var carousel = $(".background-slider"); // Selector to call out our slider

carousel.owlCarousel({

  animateOut: 'fadeOut', // Animation effect when other slides are switched on

  items:1,

  mouseDrag: false,

  activeClass: "active-owl",

  touchDrag: false,

  navigation:false

});

To make a page fully animated, it is not enough to shift slider screens by setting a parameter or two. You need to connect animate.css stylesheet. This library (with the help of CSS) allows animating objects using a wide variety of methods. In this case, we need a fadeout effect.

Also, we need to create three buttons to switch between different slides. You’ll find the slider’s navigation structure of HTML in the code below.

We’ve utilized customized navigation buttons because the out-of-the-box navigation doesn’t satisfy the needs of our project. As a result, you’ll find data-type attribute in the elements with item class. This attribute is used to switch between different slides. As every slide has its own numerical number, every button has to have their own numerical numbers as well.

<div class="navigation-slider text-center" >

  <div class="item active-step inline-block" data-type="0" data-clicked="true">

      <div class="content-item">

          <div class="name-step text-center">

              <button class="btn btn-change-bg">

                  OFFER

              </button>

          </div>

          <div class="short-description text-center">

              your goods and services

              <br>

              directly to businesses

          </div>

      </div>

  </div>

</div>

Now, we need to write a piece of code to run the whole thing on when a user clicks on one of those three buttons. The code will store the numerical number of the button and transfer it to the slider in order to display a corresponding slide. Also, we need to include active-step class to underline the active button. It will help users figure out which slide is active right now.

$(".navigation-slider").find('.item').click(function() {

  var buttonElementId = $(this).data("type"),

      clicked = $(this).data("clicked");

  var item = $(".button-slider").find('.item[data-type="' + this.currentItem + '"]');   $(this).siblings().removeClass("active-step").data("clicked", true);

  $(this).addClass("active-step");

  if(clicked){

    carousel.trigger('to.owl.carousel',buttonElementId);

  }

});

The next step is to destroy the plugin. As we’re using a Bootstrap grid, we’ll have to destroy our plugin when a screen’s resolution is at least 1200 pixels. So, any screen with resolution below 1200 pixels will be displayed as shown on image 4 below.

Image 4

As to the task to visually distribute our three slides based on the screen’s height, we use the main slide and then break it down into three different sections. Below is the code where I destroy the slider and cut the main slide into three parts.

var windowWidth = $(window).width();

var mainPageBg = $(window).height();

if(windowWidth < 1200 ){

carousel.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');

  carousel.css("height","auto");

  $(".background-slider .background-move").each(function(){

      $(this).height((mainPageBg) / 3 )

  });

  $.scrollify.disable();

}

In this article, I’ve tried to show why any homepage needs to be visually appealing. I’ve also described the technologies we used and explained why we used them using our own website as an example.

In the next article, I’m going to talk about how to create beautiful fadein and fadeout effects for a search field using CSS.

If you have any questions or suggestions about the article, please leave your comments in the section below, or write directly to Clever-Solution.com.