How it works...

In this recipe, we start out with a lot of prebuilt code and structure, which is a good starting point for DRY development, and it is the foundation that we will build upon in the coming recipes in this chapter. We have preinstalled font-awesome and Hover.css as bower_components, and these are included in the starter code for this example.

In step 2 of this recipe, we are calling the main.css file that will be compiled into the app/www/css folder (via grunt).

In step 3, we are adding the HTML structure for the index page. The CSS classes in this HTML structure are only those that exist in the default Bootstrap code. There are no additions and no overrides for css.

Once we serve our website via Harp, this index page is the one that will greet us in the browser.

In step 4, we are adding recipe1.ejs with the same structure as the index.ejs from step 3. The only difference here is that we are adding additional custom CSS classes in our HTML elements.

In step 5, we are declaring these custom CSS classes, namely the classes of display-5, display-6, display-7, and display-8. In step 6, the @include declarations call the SCSS files for Bootstrap 4, Font Awesome, and Hover.css from the bower_components folder. They also call the code from step 5, thereby extending the .display-* classes. The @include calls for other recipes are present, but are currently commented out so that we can focus on the recipe at hand.

When we compare between the index.html and recipe1.html pages, we can note that our text is much larger on the recipe1.html page, thanks to us making new, custom .display-* classes. We can also see that all our anchor tags have hover effects, since we are calling specific CSS classes from the Hover.css library in our HTML code.

Finally, to make everything work, we add the JavaScript dependencies in app/partial/_js.ejs, as called from _layout.ejs.

In conclusion, although the recipe1.html site is not outstanding from the design perspective, it is a proof of concept for inclusion of a third-party SCSS library (hover.scss), as well as for meaningful addition of new classes to the default Bootstrap 4 css.