2. Creating Your Own Build Process with Gulp | Bootstrap 4 Site Blueprints

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Bootstrap 4 Site Blueprints - Second Edition

By : Jobsen, David Cochran, Whitney

Bootstrap 4 Site Blueprints

By: Jobsen, David Cochran, Whitney

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Getting Started with Bootstrap

1. Getting Started with Bootstrap

Quantity and quality

Downloading Bootstrap's source files

Tooling setup

Using Bootstrap CLI

Preparing a new Bootstrap project

Setting up major structural elements

Browser support

The Yeoman workflow

Troubleshooting

Summary

2. Creating Your Own Build Process with Gulp

2. Creating Your Own Build Process with Gulp

What are we going to build?

Bootstrap's build process

Installing Gulp in your project

Setting up environments for development and production

Installing Bootstrap via Bower

Creating a local Sass structure

Preparing the JavaScript plugins

Modularization of your HTML

Creating a static web server

Putting it all together and creating the default task

Using the build process to finish your project

Styling the features

Styling the footer of your page

Running your template with Bootstrap CLI

JavaScript task runners are not required

Publishing your work on GitHub

Summary

3. Customizing Your Blog with Bootstrap and Sass

3. Customizing Your Blog with Bootstrap and Sass

Expected results and the process

Setting up your project and requirements

The power of Sass in your project

Importing files

Using the SCSS-linter for cleaner and more readable code

Strategies for customization with Sass

Writing your own custom SCSS code

The main part of your blog page

Styling the blog posts

Styling the side bar

The page footer

Reusing the SCSS code of the social buttons

Source code of this chapter

Summary

4. Bootstrappin' a WordPress Theme

4. Bootstrappin' a WordPress Theme

Installing WordPress and other requirements

Installing the JBST 4 theme

Installing the theme

Reusing the Sass code

Conflicts between WordPress and Bootstrap – predefined classes

Configuring the navbar

Giving your blog a page header

Don't forget the page footer

Styling your blog posts

The side bar of your blog

The off-canvas side bar

Applying style to the buttons

Styling the user comments on your pages

Adding a carousel to your page

Using Font Awesome in your theme

Using the masonry template

Child theming

Download at GitHub

Summary

5. Bootstrappin' Your Portfolio

5. Bootstrappin' Your Portfolio

What we'll build

Surveying the exercise files

Marking up the carousel

Creating responsive columns

Turning links into buttons

Understanding the power of Sass

Customizing Bootstrap's Sass according to our needs

Adding the logo image

Adding icons

Styling the carousel

Tweaking the columns and their content

Styling the footer

Recommended next steps

Summary

6. Bootstrappin' Business

6. Bootstrappin' Business

Sizing up our beginning files

Setting up the basics of your design

Creating a complex banner area

Adding utility navigation

Making responsive adjustments

Implementing the color scheme

Styling the collapsed navbar

Styling the horizontal navbar

Enabling Flexbox support

Designing a complex responsive layout

Laying out a complex footer

Setting up the markup

Summary

7. Bootstrappin' E-Commerce

7. Bootstrappin' E-Commerce

Surveying the markup for our products page

Styling the breadcrumbs, page title, and pagination

Adjusting the products grid

Styling the options sidebar

Adding a search form to your designing

Summary

8. Bootstrappin' a One-Page Marketing Website

8. Bootstrappin' a One-Page Marketing Website

Overview

Surveying the starter files

Viewing the page content

Adding Font Awesome to our project

Adjusting the navbar

Customizing the jumbotron

Beautifying the features list

Tackling customer reviews

Creating attention-grabbing pricing tables

Adding the final touches

Adding ScrollSpy to the navbar

Summary

9. Building an Angular 2 App with Bootstrap

9. Building an Angular 2 App with Bootstrap

Overview

Setting up your first Angular app

Adding routing to our app

Setting up navigation

Adding Bootstrap's HTML markup code to your app

Integrating Bootstrap's CSS code into the application

Downloading the complete code

What about Angular CLI?

Using React.js with Bootstrap

Other tools for deploying Bootstrap 4

Summary

Installing Gulp in your project

Before we go any further, we must first initiate npm for our project by running the following command in our console:

npm init

Answer the questions like those shown in the following screenshot:

The preceding command creates a new package.json file; this file holds various metadata relevant to the project, and it also contains the dependencies for the project. The Gulp plugins you will install later on are all (dev) dependencies of your project.

Now install Gulp in your project, devDependencies, by running the following command in your console:

npm install --save-dev gulp

The --save-dev flag writes down Gulp as a devDependency into the package.json file.

Creating the Gulpfile.js which holds your tasks

Create a new file called Gulpfile.js in your project directory and write down the following JavaScript code into it:

var gulp = require('gulp'); 
 
gulp.task('default', function() { 
  // place code for your default task here 
});

Later on...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Bootstrap 4 Site Blueprints

Search

Your notes and bookmarks