Bootstrap 4 – Building a testimonial component with Salvattore

MyPhoto does a good job of boasting about the services on offer and the quality of those services. However, a user may want to read some feedback from the previous customers. To do this, we’ll add a testimonials component to our page as a new tab in the services component. The Testimonials tab will display some positive feedback from the users. Let’s add that new tab to our list of tabs:

    <li class="nav-item">
        <a href="#services-testimonials"                  
        data-toggle="tab">Testimonials</a>
    </li>

Next, we want to add some content. Let’s use Bootstrap’s grid system to display the testimonials in four neat rows of three columns. Add the following code following to the services-prints markup:

    <div role="tabpanel" class="tab-pane" >
   <div class="container">
      <div class="row myphoto-testimonial-row">
         <div class="col-xs-3 myphoto-testimonial-column">
            <h6>Debbie</h6>
            <p>Great service! Would recommend to friends!</p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Joey</h6>
            <p>5 stars! Thanks for the great photos!</p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Jack & Jill</h6>
            <p>So happy with how the photos turned out!
               Thanks for capturing the memories of our day!
            </p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Tony</h6>
            <p>Captured our Cup final win! Great stuff!</p>
         </div>
      </div>
      <div class="row myphoto-testimonial-row">
         <div class="col-3 myphoto-testimonial-column">
            <h6>Anne</h6>
            <p>Really high quality prints!</p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Mary</h6>
            <p>Made a stressful event much easier!
               Absolute professionals!
            </p>
         </div>
      </div>
      <div class="row myphoto-testimonial-row">
         <div class="col-3 myphoto-testimonial-column">
            <h6>Oscar</h6>
            <p>Declared their greatness, exhibited greatness.
            </p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Alice</h6>
            <p>Wonderful! Exactly as I imagined they would 
               turn out!
            </p>
         </div>
         <div >
            <h6>Nick</h6>
            <p>Perfectly captured the mood of our gig. 
               Top notch.
            </p>
         </div>
      </div>
   </div>
</div>

We have added three rows with varying number of columns. Each column includes the name of a user and the associated testimonial. As we want a maximum of 4 columns in a row, we have given each column the col-3 class so that the column takes up 3 of the 12 columns in the Bootstrap grid system. We have also given each column an additional myphoto-testimonial-column class for specific styling and each row a myphoto-testimonial-row class. Add the following rules to myphoto.css:

    .myphoto-testimonial-row {
        margin-right : 5px;
    }
    .myphoto-testimonial-column 
    {
        border: 1px solid black; background-color: #FFFFFF;
        padding: 10px;      
        margin: 5px;
        max-width: 23%;
    }

We have given some extra spacing to our testimonials. To make up for the extra spacing, we set a max-width property of 23% as opposed to the 25% declared by col-3 and overrode the default margin-right property of the row class of -15px to 5px. We also included a black border and solid white background. Let’s check out our results:

Figure 7.1: A Testimonials tab is created using Bootstrap’s grid system (example01.html)

Okay, cool. We have our Testimonials tab and our positive testimonies from users. However, it looks kind of ugly. The contents of the columns are of varying lengths, which makes the spacing visually awkward. Take the distance between Joey’s testimony on the first row and Mary’s on the second. Wouldn’t it be nice if we could decrease this distance? From column to column across individual rows, the spacing is uniform and looks good. Wouldn’t it be nice if we could achieve this uniformity vertically as well? Unfortunately, Bootstrap’s grid system is not flexible enough to make the vertical spacing uniform while allowing for varying heights of columns. However, we can achieve this with a popular library called Salvattore.

Introducing Salvattore

Salvattore ( http://salvattore.com/ ) is a JavaScript library that allows for more flexible grid system definitions. For instance, with the help of Salvattore, we can define grid system rules that will allow three rows of four columns, but the position of each column is relative to the height of the corresponding column in the preceding row. Salvattore is a pure JavaScript library, meaning that it doesn’t depend on any other library (such as jQuery) to work.

Let’s add Salvattore to our project. Download Salvattore using NPM:

    npm install salvattore

Then, ensure that you include it in our markup at the bottom of the page. Including the JavaScript file at the bottom of our page is the suggested practice by Salvattore as it needs the DOM to be loaded before it takes effect:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/alert.js"></script>
<script src="js/carousel.js"></script>
<script src="js/a11yhcm.js"></script>
<script src="node_modules/jquery.browser/dist/jquery.browser.min.js"></script> 
<script src="node_modules/bootpag/lib/jquery.bootpag.js"></script>
<script src="node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"></script>
<script src="node_modules/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
<script src="node_modules/salvattore/dist/salvattore.min.js"></script>

Next, we need to rewrite our testimonials grid to work with Salvattore. One big difference between how we constructed the grid initially and how we need to construct it for Salvattore is that we won’t be grouping the testimonials by row; Salvattore will do the grouping for us.

Currently, we have the following:

 <div class="row myphoto-testimonial-row">
     <div class="col-3 myphoto-testimonial-column">
         <h6>Anne</h6>
         <p>Really high quality prints!</p>
     </div>
     <div >
        <h6>Mary</h6>
         <p>Made a stressful event much easier! Absolute
         professionals!</p>
     </div>
 </div>

Here, we are creating a row and then constructing the columns within that row. That is not how Salvattore works. Let’s rewrite our grid. This time, we will simply be listing the testimonials:

<div role="tabpanel" class="tab-pane" >
  <div class="container">
    <div class="row">
      <div class="myphoto-testimonials-grid">
        <div class="myphoto-testimonial-column">
          <h6>Debbie</h6>
          <p>Great service! Would recommend to friends!
          </p>
        </div>
        <div class="myphoto-testimonial-column">
          <h6>Anne</h6>
          <p>Really high quality prints!</p>
        </div>
        <div class="myphoto-testimonial-column">
          <h6>Oscar</h6>
          <p>Declared their greatness, exhibited 
          greatness.</p>
        </div>
        <div class="myphoto-testimonial-column">
          <h6>Joey</h6>
          <p>5 stars! Thanks for the great photos!</p>
       </div>
       <div class="myphoto-testimonial-column">
         <h6>Mary</h6>
         <p>Made a stressful event much easier! 
         Absolute professionals!</p>
       </div>
       <div class="myphoto-testimonial-column">
         <h6>Alice</h6>
         <p>Wonderful! Exactly as I imagined they 
         would turn out!</p>
       </div>
       <div class="myphoto-testimonial-column">
         <h6>Jack & Jill</h6>
         <p>So happy with how the photos turned out! 
         Thanks for capturing the memories of our day!
         </p>
         </div>
       <div class="myphoto-testimonial-column">
        <h6>Nick</h6>
        <p>Perfectly captured the mood of our gig. 
        Top notch.</p>
      </div>
      <div >
       <h6>Tony</h6>
       <p>Captured our Cup final win! Great stuff!
       </p>
     </div>
    </div>
  </div>
 </div>
</div>

Note how we encapsulated our testimonials inside a row in the preceding code snippet. This is due to a nasty quirk: the page is not reacting to Salvatorre’s data-columns hook, so the tab is rendered with a height of 0. Encapsulating the columns in a row forces the height, thus solving our problem without requiring us to write any custom CSS. Furthermore, we have added a parent div wrapper around all the testimonials, with the myphoto - testim onial - grid class. As we are no longer referencing Bootstrap’s grid system, each column entry no longer has the col - 3 class, and we have also removed the myphoto - testimonial - column classes. The final thing we need to do with the markup is add a data - columns attribute to the parent grid element. Observe the following code snippet:

    <div  data-columns>

The data-columns attribute is the hook Salvattore needs to know which elements to act upon. All we need to do now is add some CSS.

Open up myphoto.css and replace the code that we added on page 3 of this chapter (the style rules for .myphoto-testimonial-column) with the following:

    .myphoto-testimonials-grid[data-columns]::before {
        content: '4 .column.size-1of4';
    }
    .column { 
        float: left; 
    }
    .size-1of4 { 
        width: 25%;
    }

So what’s happening here? First, we are using the before pseudo-selector to define how many columns we want and the classes we want applied. In this case, we want four columns, and we want to apply the column class and the size-1of4 class. The column class ensures that column elements are rendered as close to the left of the element’s container element as possible, and any elements with the size-1of4 class are to only take up a quarter of the available space.

If we planned on only having three columns, then we could define and apply a size-1of3 class with a rule to only take up 33.333% of the available space, and so on. Salvattore will split the testimonials into four groups, as evenly as possible, and apply the classes defined by . myphoto - testimonials - grid[data - columns]::before to the column groups. For instance, in our example, the first group of columns has the following markup:

    <div class="myphoto-testimonials-grid" data-columns>
        <div >
            <h6>Debbie</h6>
            <p>Great service! Would recommend to friends!</p>
        </div>
        ...
        <div>
            <h6>Mary</h6>
            <p>Made a stressful event much easier! Absolute
            professionals!</p>
        </div>
        <div>
            <h6>Tony</h6>
            <p>Captured our Cup final win! Great stuff!</p>
        </div>
    </div>
    ...

Let’s see how this renders:

Figure 7.2: The unstyled testimonials, created using Salvattore (example01.html)

Great! Now, all we need to do is add some styling!

The first thing that we want to do is create some space between the top and the content. As you can see, the top of the panel is very close to the list tab. We have a parent class for our grid, myphoto-testimonial-grids, that we can leverage. Add the following style rules:

    .myphoto-testimonials-grid {
        padding-top : 30px ;
    }

Take a look at the screenshot in figure 7.3:

Figure 7.3: The unstyled testimonials, created using Salvattore with a top padding of 30px (example01.html)

Next up, we want to make the testimonials distinguishable. For this, we’ll leverage the myphoto-testimonials-column. Remove any previous rules for this class and add the following:

    .myphoto-testimonials-column {
        padding: 10px;
        border: 1px solid #000000;
        margin: 5px;
    }

We have simply created a border around the element, added an internal spacing of 10px between the element contents and its border, and lastly, we have created a margin of 5px between each of the elements. Add the myphoto-testimonial-column class to each of our testimonial elements:

    <div class="myphoto-testimonial-grid" data-columns>
        <div class="myphoto-testimonial-column">
            <h6>Debbie</h6>
            <p>Great service! Would recommend to friends!</p>
        </div>
        <div class="myphoto-testimonial-column">
            <h6>Anne</h6>
            <p>Really high quality prints!</p>
        </div>
        <div class="myphoto-testimonial-column">
            <h6>Oscar</h6>
            <p>Declared their greatness, exhibited greatness.</p>
        </div>
        <div class="myphoto-testimonial-column">
            <h6>Joey</h6>
            <p>5 stars! Thanks for the great photos!</p>
        </div>
        <div class="myphoto-testimonial-column">
            <h6>Mary</h6>
            <p>Made a stressful event much easier! Absolute
            professionals!</p>
        </div>
        <div class="myphoto-testimonial-column">
            <h6>Alice</h6>
            <p>Wonderful! Exactly as I imagined they would 
            turn out!</p>
        </div>
        <div class="myphoto-testimonial-column">
            <h6>Jack & Jill</h6>
            <p>So happy with how the photos turned out! Thanks 
            for capturing the memories of our day!</p>
        </div>
        <div class="myphoto-testimonial-column">
            <h6>Nick</h6>
            <p>Perfectly captured the mood of our gig. Top notch.</p>
        </div>
        <div >
            <h6>Tony</h6>
            <p>Captured our Cup final win! Great stuff!</p>
        </div>
    </div>

That’s a little better. Now we can at least differentiate each of the testimonials from one another (refer to figure 7.4). Compare this with the testimonial component we built using just Bootstrap’s grid system; the visual improvements are obvious. We have a much more natural, flowing visual now as compared to the clunky, almost awkward original visual.

Now, let’s see how we can leverage Bootstrap’s grid system to ease the use of Salvattore.

Take a look at the screenshot in figure 7.4:

Figure 7.4: The testimonials arranged using Salvatorre and with some custom styling (example01.html)
The content property is used to add content to a given element. For example, the span::before {content: 'Hello World'; } rule will insert the "Hello World" text before the content within any span element on the page. Similarly, the rule span::before {content: 'Hello World'; } inserts the "Hello World" text after the content within any span element on the page. It is important to note that the content property can only be used in conjunction with either the after or before selector.

Now that we have a working Salvattore grid, let’s animate. Animate.css ( https://daneden.github.io/animate.css/ ) is a cross-browser, pure CSS library that provides a huge number of easy-to-use classes to add animations to a page, that is, the library has zero dependencies and can be layered upon any web page.

Adding Animate.css to MyPhoto

As it’s a pure CSS library, integrating Animate.css with MyPhoto is exceedingly simple. First, use NPM to download Animate.css:

    npm install animate.css

Next, include the library in the head of MyPhoto, after the other CSS includes:

    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css" />
  <link rel="stylesheet"
    href="node_modules/animate.css/animate.min.css" />

To ensure that we are set up correctly, let’s add an animation to the body of our web page. To use any of the classes provided by Animate.css, we must include the animated class on the element:

    <body data-spy="scroll" data-target=".navbar" >

If we take a look at animate.min.css, we will see that all selectors depend on the animated class to be defined, and the animated class itself provides the base animation rules:

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
    .animated.hinge {
        -webkit-animation-duration:2s;
        animation-duration:2s
    }

To apply the animation itself is just as simple—add the desired class to the element. To make MyPhoto fade in, we just need to apply the fadeIn class to the body element:

    <body data-spy="scroll" data-target=".navbar" >

If you fire up the page, you should see the page slowly fade in as it renders. If you do not see this animation, ensure that you have the correct path to animate.min.css in the head.

Now that we have Animate.css added to our project and working, let’s add some emphasis to some of the core elements in our site.

Bouncing alerts

MyPhoto has a special offer alert in a prominent position on the page. However, it may still not grab the attention of the user initially. We need to focus the attention of the user immediately on the alert and add some emphasis. We need to tell the user that this is something they should read.

Animate.css has a range of bounce classes that are great for grabbing the attention of a user. We have a selection of 11 bounce classes here: bounce, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, and bounceOutUp.

We’ll go with the bounceIn class, which gives a throbber-like behavior. To get the bounceIn effect, add the animated and bounceIn classes to the special offers alert element:

 <div class="alert alert-info alert-position animated bounceIn">
      <a href="#" class="close" data-dismiss="alert" aria-        
       label="close">&times;</a>
      <a href="#" class="close minimize" data-minimize="alert" aria-
       label="minimize">_</a>
      <a href="#" class="close expand d-none" data-expand="alert" aria-   
       label="expand">+</a>
      <strong><i ></i> Special Offer -  
      </strong>
      2 FOR 1 PRINTS TODAY ONLY WITH PROMO CODE 
      <span style="font-style: italic">BOOTSTRAP</strong></span>
</div>

The alert should now be animated. Animate.css also provides an infinite animation option, where the animation will be infinitely repeated. To use this option, simply add the infinite class to the element:

    <div >

Now, the bounceIn effect will be infinitely repeated. However, it does not look great as the element actually transitions from hidden to visible during the animation, so this transition is also looped. This is a great example of how the infinite class does not play well with all animations. A more infinite-friendly animation is pulse, which offers a similar effect. Replace the bounceIn class with the pulse class:

    <div >

Great, the special offers alert now animates infinitely, with a gentle pulse to gain the attention of the user. However, if we want this applied to all alerts, then we need to apply it to all alerts individually. In this scenario, if there is a design change and, for instance, we want to change the animation, we will again have to change them all individually. Let’s manage it centrally, instead, by extending the Alert jQuery plugin by adding further customizations to the js/alert.js file we created in Chapter 6, Customizing Your Plugins.

So, what do we want to do? On page load, we want to add animate.css classes to our alert elements. First, let’s add our on load listener to our IIFE. Add this directly after $(document).on('click.bs.alert.data-api', '[data-expand="alert"]', Alert.prototype.expand):

    $(window).on('load', function () {
    })

Next, we need a hook for our plugin. Let’s use a data-* attribute, as is the general practice with Bootstrap jQuery plugins. We will call it data-alert-animate. Any element to which we want these classes applied will already have the data-alert-animate attribute. Our plugin will loop through each of these elements, applying the relevant classes:

    $(window).on('load', function() {
        $('[data-alert-animate]').each(function() {
        })
    })

In our markup, let’s update the special offers alert element to remove the animate.css classes and add the data-alert-animate attribute:

    <div  data-alert-animate>

We want to add three classes to the data - alert - animate elements: animated, pulse , and infinite. Let’s update the plugin to apply these classes to each data - alert - animate element:

    $(window).on('load', function() {
        $('[data-alert-animate]').each(function() {
            $(this).addClass('animated pulse infinite')
        })
    })

Now, the markup will be dynamically transformed on page load, adding the animated, pulse, and infinite classes:

Figure 7.5: By examining the page source inside our browser, we can see the dynamically transformed markup: our alert now has the animated , pulse , and infinite classes applied to it (example03.html)

Great, but it isn’t exactly extensible. Our plugin does not allow for these classes to be overridden via the data-alert-animate attribute. Let’s fix this by defining a default animation, using pulse infinite, but allowing a developer to override the animation via the data-alert-animate attribute. Update the on load function as follows:

    $(window).on('load', function() {
        $('[data-alert-animate]').each(function() {
            var defaultAnimations = 'animated pulse infinite'
            var $animations = $(this).attr('data-alert-animate')
            if ($animations) {
                $(this).addClass('animated ' + $animations)
            } else {
                $(this).addClass(defaultAnimations)
            }
        })
    })

Now, we are defining a defaultAnimati ons variable from animated, pulse, and infinite. We then check whether the data - alert - animate attribute has any value; if it has, add the classes referenced, plus the animated class. If not, simply apply the classes defined in defaultAnimations.

Loading MyPhoto as-is, we should still see the animated, pulse, and infinite classes applied. However, the alert looks a little awkward, as it renders in a static state before the animation takes effect. To make the behavior of the alert more natural, let’s make it invisible until Alert.js adds the animation classes. Add a new class, hide-before-animated, to myphoto.css:

    .hide-before-animated {
        visibility: hidden;
    }
    .hide-before-animated.animated {
        visibility: visible;
    }

The hide-before-animated class simply sets the visibility of the element to hidden, unless the animated class is also present on the element, in which case visibility is set to visible. As the data-alert-animate attribute adds the animated class to an element, the element will be invisible until the element is ready. Add the hide-before-animated class to the class attribute of the special offers alert element and reload the page to see the results:

    <div  data-alert-animate>

Let’s update our special offers alert element to override the pulse and infinite values with just the bounceIn class:

    <div  data-alert-
    animate="bounceIn">

Now, we should see just the animated and bounceIn classes applied to the element:

Figure 7.6: By examining the page source inside our browser, we can see how only the animated and  bounceIn classes have now been applied to our alert (example03.html)

That’s perfect. Now, via a neat little data -attribute, we can initiate a default animation for our alerts and override that animation if need be.

Another nice use of these animations is to add a natural feel to the rendering of elements that may initially be hidden. Let’s apply this idea to the Testimonials tab we created earlier in this chapter.

Animating a Salvattore grid

The testimonials component is a very simple grid built with Salvattore. While it is a neat grid, we want to make it a little flashier. Let’s simply add an animation from Animate.css, the fadeIn class, so that the grid appears to fade into view when the Testimonial tab is open:

    <div  data- 
    columns> 

When a user clicks on the Testimonials tab, the tab panel will open and then the grid will fade into view.

We can go a bit further and actually apply an animation to the column groups to induce optimal motion sickness. In myphoto.css, we already leverage the data-columns attribute to allow Salvattore to create the column groups for the grid and apply the appropriate style:

    .myphoto-testimonials-grid[data-columns]::before {
        content: '4 .column.size-1of4';
    }

We can make the columns bounce into view by simply extending this rule to include the animated and bounceIn classes:

    .myphoto-testimonials-grid[data-columns]::before {
        content: '4 .column.size-1of4.animated.bounceIn';
    }

Now, when the tab is opened, the whole grid fades in while the column groups also have a bounce effect. It’s a little crass, but it’s effective. The resulting markup for the component should look like the following:

Figure 7.7: By examining the page source inside our browser, we can see that the testimonial grid now has bounce and fade effects applied to it

As far as Animate.css goes, that is all there is. A nice, simple, and elegant library for providing nice, simple, and elegant animations. For a full list of effects, take a look at the Animate demo website at https://daneden.github.io/animate.css/.

Next, we will take a look at a complementary library—Hover.

Comments are closed.