In this chapter, we will cover the following topics:
.display-* and adding hover effects with Hover.cssIn this chapter, we will set up a website that will hold all the aforementioned recipes. Each recipe will be a link in that website's navbar's dropdown. The structure for the complete website, with all the recipes included, is available in the code for this chapter. To preview this structure, navigate to the chapter3/app folder, and run the harp server command from the console. Then, click on the about link in the navbar. The
about
page lists all the files and folders in this chapter's code.
Looking at the code structure for this chapter, it is important to note the most important parts.
The app folder comprises all the recipes' files. The app folder has the following subfolders and files:
css (created by the grunt sass command)js (copied by the grunt copy command)partial (this folder holds the following partial files:_js.ejs and _nav.ejs, called by _layout.ejs)www (compiled by the harp compile and/or harp server commands)about.ejs (holds the file tree overview)index.ejsrecipe1...In this recipe, we will extend the text classes of .display-* and add hover effects to our links, using the Hover.css library.
To get ready, download the starter code for this chapter, and refer to this chapter's starter code in the folder titled chapter03-start. Open the app/partial/_nav.ejs file, which is already saved with its final code. The reason for this is to have a working navbar with links to all the recipes used in this chapter.
Note that when including the .ejs files in HTML, you can just call the filename. There is no need to use the .ejs extension. You can see plenty of examples of this in the app/partial/_nav.ejs anchor tags.
It is also important to note that our Gruntfile.js is somewhat different than the one in the preceding chapter. This time, you will need to manually run grunt copy to copy all the necessary JS dependencies. However, this needs to be done only once. Then, later...
In this recipe, we will create a responsive comments section using media objects. We will enhance the design with the help of the HTML's <time> element and Bootstrap's badge component. We will also use Font Awesome's icons for comment liking and sharing. We will add interactivity using Bootstrap's alert component, which will be triggered after clicking on a Font Awesome icon.
Everything is already set up in our chapter3-start folder to start working on this recipe. Now that all the files are there, we just need to add code to them.
app/recipe2.ejs and add the following code to it: <!-- Create Comment Areas Using Media Objects -->
<div class="container mt-5">
<h1>Chapter 3, Recipe 2:</h1>
<p class="lead">Create Comment Sections Using Media Objects</p>
<ul class="custom-media">
<li class="media list-group-item media p...In this recipe, we demonstrate the use of Bootstrap's typography classes. Bootstrap 4 offers a number of different classes, which allow for easy manipulation of text styles out of the box.
Navigate to the third recipe of Chapter 3 website (you can access it by navigating to chapter3/complete/app in the code files then running the harp server command, which will allow you to visit the completed website for the this chapter, at localhost:9000 in your browser). Here, you can click on the Recipe dropdown in the navbar, click on the recipe 3 link, and preview the final result that we are trying to achieve.
To get this look, we will combine text color classes, background color classes, display classes, and vertical text alignment classes. We will create this look from the empty files readily available in our chapter3/start/recipe3 folder.
In this recipe, we will examine how to use and modify Bootstrap's blockquote element. The technique we'll employ is using the :before and :after CSS pseudo-classes. We will add HTML entities to the CSS content property, and then style their position, size, and color.
Navigate to the recipe4 page of the chapter 3 website, and preview the final result that we are trying to achieve (its preview is available in chapter3-complete/app, after running harp server in the said folder). To get this look, we are using all the regular Bootstrap 4 CSS classes, with the addition of .bg-white, added in the preceding recipe. In this recipe, we will add custom styles to .blockquote.
In this recipe, we will show how to extend the blockquote styles using Sass. To make this work, we will have to rely both on the @include for main-03-04.scss and the @include for main-03-05.scss. Also, since we are overriding Bootstrap variables, our @include element for this recipe has to be added before the addition of the Bootstrap SCSS files.
Navigate to the recipe5 page of the chapter 3 website, and preview the final result that we are trying to achieve. To get this look, we need to override several SCSS variables from Bootstrap 4, as well as declare a new variable to be used in the box-shadow effect applied around the blockquote element.
In this recipe, we will align text around images using default Bootstrap classes.
Navigate to the recipe6 page of the chapter 3 website, and preview the final result that we are trying to achieve. The key section of this recipe is the <img> HTML element, and its CSS classes, as specified in its class attribute.
chapter3/start/app/recipe6.ejs and insert the following code: <div class="container mt-5">
<h1>Chapter 3, Recipe 6:</h1>
<p class="lead">Align Text Around Images</p>
<section class="bg-success text-white clearfix mb-3">
<img src="http://placehold.it/150x150" alt="" class="img-fluid
rounded-circle float-left float-sm-right float-md-left float-lg-
right float-xl-left p-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
temporibus aliquid dignissimos dolor aut at, libero est
obcaecati...In this recipe, we will align text around images using default Bootstrap classes with the addition of the shape-outside CSS property. With shape-outside, we can change the shape of a float area for a floated element, from a square into a circle or even a polygon.
For advanced uses of the shape-outside property, check out the Adobe Brackets editor extension at http://brackets.dnbard.com/extension/brackets-css-shapes-editor.
Navigate to the recipe6 page of the chapter 3 website, and preview the final result that we are trying to achieve. To get this look, we are combining Bootstrap's default .float-*, .img-fluid and .rounded-circle classes, with our custom .wrap-text-around, .circle-placed-right, and .circle-placed-left classes. We will create this look from the empty files readily available in our chapter3-start folder.
In this recipe, we will utilize default table-specific Bootstrap classes to achieve several variations on the same HTML structure.
Navigate to the recipe8 page of the chapter 3 website, and preview the final result that we are trying to achieve. To get this look, we will use several Bootstrap 4 classes, as follows:
.table-responsive and .table.table-striped, .table-bordered, and .table-hover.table-inverse, .table-warning, .table-info, .table-danger, .table-success, and .table-sm.thead-default and .thead-inverseThe basic HTML structure will be repeated several times, with changes involving the use of various combinations of the aforementioned Bootstrap 4 classes.
© 2017 Packt Publishing Limited All Rights Reserved
