Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Modularization of your HTML


Although we'll only create a one-page design in this chapter, using a template engine for your project is not a bad idea. Whenever you decide to extend your project with one or more other HTML pages, DRY coding your HTML will make your work more efficient and reusable. Many HTML template languages and engines are available. Bootstrap uses the Jekyll static site generator to enable you to run its documentation locally. Many templates for Bootstrap CLI use Nunjucks now. In this chapter, you will meet Panini for Gulp. Panini is a flat file compiler that uses the concepts of templates, pages, and partials powered by the Handlebars templating language.

For the marketing example project, you'll have to create the following file and directory structure, which holds your HTML templates:

In the preceding file and directory structure, the pages directory contains your pages. Each page has a layout, which can be found in the layouts directory. Both pages and layouts may include...