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

Preparing a new Bootstrap project


After installing Bootstrap CLI, you can create a new Bootstrap project by running the following command in your console:

bootstrap new --template empty-bootstrap-project-gulp

Enter the name of your project for the question: "What's the project called? (no spaces)". A new folder with the project name will be created. After the setup process, the directory and file structure of your new project folder should look like that shown in the following screenshot:

The project folder also contains a Gulpfile.js file. In Chapter 2, Creating Your Own Build Process with Gulp, you can read how to set up a Bootstrap project with a Gulp build process yourself.

Now you can run the bootstrap watch command in your console and start editing the html/pages/index.html file. The HTML templates are compiled with Panini. Panini is a flat file compiler which helps you to create HTML pages with consistent layouts and reusable partials with ease.

You can read more about Panini at http://foundation.zurb.com/sites/docs/panini.html.

Panini compiles the HTML templates into a single index.html file like the base template described in the preceding sections.