How to do it...

  1. Navigate to the bower_components folder and make sure that you can see all the folders as described in this chapter's introduction. For more information on the Hover.css library, visit its GitHub page at https://github.com/IanLunn/Hover. For examples of effects in use, check out the examples page at http://ianlunn.github.io/Hover/.
  2. In app/_layout.ejs, add the following code:
      <!DOCTYPE html>
      <html lang="en">

      <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-
       scale=1, shrink-to-fit=no">
       <meta name="description" content="">
       <meta name="author" content="">
       <link rel="icon" href="../../favicon.ico">
       <title>
       <%- title %>
       </title>

       <!-- Bootstrap core CSS -->
       <link href="css/main.css" rel="stylesheet">

      </head>

      <body class="bg-faded-green">

       <%- partial("partial/_nav") %>

       <%- yield %>

       <%- partial("partial/_js") %>

      </body>
      </html>
  1. In app/index.ejs, add this code:
      <div class="container">

       <div class="mt-5">
       <h1>Welcome to Chapter 3</h1>
       <div class="mt-2 text-justify">This webpage contains the recipes  
       from the 3rd chapter of <a href="#" class="bg-faded">Bootstrap 4  
       Cookbook</a>:
       <ul class="mt-2">
       <li>Author: <a href="#" class="bg-faded">Ajdin Imsirovic</a>
       </li>
       <li>Technical Reviewer: <a href="#" class="bg-faded">Zlatko  
       Alomerovic</a></li>
       <li>Publisher: <a href="#" class="bg-faded">Packt Publishing</a> 
       </li>
       </ul>
       </div>
       </div>

      </div><!-- /.container -->
  1. In app/recipe1.ejs, add the following code that is very similar to the code in step 3:
      <div class="container">

       <div class="mt-5">
       <h1>Chapter 3, Recipe 1:</h1>
       <p class="lead">Extend the Text Classes of .display-* and Add  
       Hover Effects with Hover.css</p>
       <div class="display-7 mt-2 text-justify">This webpage contains  
       the recipes from the 3rd chapter of <a href="#" class="bg-faded  
       hvr-buzz">Bootstrap 4 Cookbook</a>:
       <ul class="display-8 mt-2">
       <li>Author: <a href="#" class="bg-faded hvr-underline-from- 
       left">Ajdin Imsirovic</a></li>
       <li>Technical Reviewer: <a href="#" class="bg-faded hvr- 
       underline-from-left">Zlatko Alomerovic</a></li>
       <li>Publisher: <a href="#" class="bg-faded hvr-underline-from-  
       left">Packt Publishing</a></li>
       </ul>
       </div>
       </div>

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

If you take a look at the preceding code, you will see that the only difference between step 3 and step 4 is that we have inserted additional CSS classes to the HTML elements. As can be seen in step 4, we added custom .display-* text classes. We have also included hover effects from Hover.css.

  1. In the root of our folder, in main-03-01.scss, add the following code:
      a:focus, a:hover {
       text-decoration: none;
      }

      .display-5 {
       font-size: 3rem;
      }
      .display-6 {
       font-size: 2.5rem;
      }
      .display-7 {
       font-size: 2rem;
      }
      .display-8{
       font-size: 1.5rem;
      }
  1. In main.scss, we will include all the SCSS files we need, using the @import statement:
      // @import "main-03-04.scss";

      @import "./bower_components/bootstrap/scss/bootstrap.scss";
      @import "./bower_components/font-awesome/scss/font-awesome.scss";
      @import "./bower_components/hover/scss/hover.scss";
      @import "main-03-01.scss";
      // @import "main-03-02.scss";
      // @import "main-03-03.scss";

      // @import "main-03-07.scss";
  1. Finally, add the following code to app/partial/_js.ejs:
      <!-- Bootstrap core JavaScript
       ================================================== -->
       <!-- Placed at the end of the document so the pages load faster  
       -->
       <script src="js/jquery.js"></script>
       <script src="js/tether.js"></script>
       <script src="js/bootstrap.js"></script>
       <script src="https://raw.githubusercontent.com/adobe- 
       webplatform/css-shapes-polyfill/master/shapes-polyfill.min.js">  
       </script>
上一章目录下一章