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

Reusing the Sass code


You've already coded the Sass code for our theme in Chapter 3, Customizing Your Blog with Bootstrap and Sass. To reuse this code you can copy the Sass files and directory from the scss/includes directory of Chapter 3, Customizing Your Blog with Bootstrap and Sass into the folder assets/scss/includes directory of your jbst-weblog-theme theme directory. You may overwrite the _navbar.scss Sass partial that already exists and remove the _bootstrap.scss Sass partial. You should end up with a file and directory structure like that shown in the following image:

Now edit the assets/scss/styles.scss file. First import the includes/variables.scss file just before the import of the custom variables and import the other partials at the end of the assets/scss/styles.scss file after the // Import Customizations comment. After your changes, the SCSS code in the assets/scss/styles.scss file should look like the following:

/************************************************************...