Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Bootstrap 4 Site Blueprints
Bootstrap 4 Site Blueprints

Bootstrap 4 Site Blueprints: Design mobile-first responsive websites with Bootstrap 4 , Second Edition

Arrow left icon
Profile Icon Jobsen Profile Icon David Cochran Profile Icon Whitney
Arrow right icon
€18.99 per month
Paperback Oct 2016 404 pages 2nd Edition
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Jobsen Profile Icon David Cochran Profile Icon Whitney
Arrow right icon
€18.99 per month
Paperback Oct 2016 404 pages 2nd Edition
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Bootstrap 4 Site Blueprints

Chapter 2. Creating Your Own Build Process with Gulp

In this chapter, you will learn how to set up your own build process for your Bootstrap project. Bootstrap's CSS is written in Sass, so when you are not using the precompiled CSS code, you will have to compile the CSS code by yourself. You'll need a Sass compiler to compile the Sass code into CSS.

Also, Bootstrap JavaScript plugins should be bundled and minified before being taken into production.

After reading this chapter, you will have learned to:

  • Set up a build process with Gulp
  • Create different environments in your build processor
  • Compile your Sass code into CSS
  • Automatically add vendor prefixes to your CSS code
  • Prepare the JavaScript plugin for your project
  • Run a static web server
  • Test your code
  • Use standard Bootstrap components and tweak them to fit your needs
  • Create a simple one-page marketing website with Bootstrap
  • Publish your project on GitHub

What are we going to build?

In this chapter, you will create a build process for an example project. The process not only prepares your CSS and JavaScript code, but also runs a static web server, which automatically reloads on file changes in browser testing, runs some tests for your code, and more.

To demonstrate the different steps of the build process, you will create an example project. The example project is a simple one-page marketing layout powered by Bootstrap. At the end, you should have created an HTML page, which will look like that shown in the following screenshot:

What are we going to build?

Requirements

Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine. Node.js uses an event-driven non-blocking input/output model and is very lightweight and efficient. To run the example code in this chapter, you should have installed Node.js on your system. Download the Node.js source code or a pre-built installer for your platform at https://nodejs.org/en/download/. Node.js is available...

Bootstrap's build process

Bootstrap ships with its own build process. At the time of writing this book, Bootstrap's build process is written with Grunt. It enables you to compile and prepare a custom version of Bootstrap and run the documentation locally. Grunt is just like Gulp: it is a task runner for Node.js. Grunt does not use streams but saves the temporary code in file products.

The tasks for Bootstrap's Grunt build process can be found in the Gruntfile.js file included in the source files. You can use this file to understand which tasks you will have to run to get your code ready for testing in production.

In this chapter, we use Gulp instead of Grunt since Gulp is considered to be more intuitive and much easier to learn. Gulp is newer than Grunt, but its community is growing fast and new plugins are added every day.

Finally, you should note that task runners that link Gulp and Grunt will make your work easier but are not required to run your tasks on Node.js.

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:

Installing Gulp in your project

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...

Setting up environments for development and production

Of course, you will need your build process to develop your project, but after that you will run different tasks to get your code ready for production. In the development stage, you need CSS code with CSS sourcemaps for easy debugging, and in the production stage, you probably will minify the CSS code without CSS sourcemaps.

The gulp-environments plugin makes it convenient to create separate environments, such as development and production, to run your tasks in. You can install this plugin by running the following command:

npm install --save-dev gulp-environments

Then add the plugin to your Gulpfile.jsfile, which should look like this:

var environments = require('gulp-environments');

Then assign the environments as follows:

var development = environments.development;
var production = environments.production;

Now you can pass a command line flag --env to set the environment:

gulp build --env development

You can also, conditionally...

What are we going to build?


In this chapter, you will create a build process for an example project. The process not only prepares your CSS and JavaScript code, but also runs a static web server, which automatically reloads on file changes in browser testing, runs some tests for your code, and more.

To demonstrate the different steps of the build process, you will create an example project. The example project is a simple one-page marketing layout powered by Bootstrap. At the end, you should have created an HTML page, which will look like that shown in the following screenshot:

Requirements

Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine. Node.js uses an event-driven non-blocking input/output model and is very lightweight and efficient. To run the example code in this chapter, you should have installed Node.js on your system. Download the Node.js source code or a pre-built installer for your platform at https://nodejs.org/en/download/. Node.js is available...

Bootstrap's build process


Bootstrap ships with its own build process. At the time of writing this book, Bootstrap's build process is written with Grunt. It enables you to compile and prepare a custom version of Bootstrap and run the documentation locally. Grunt is just like Gulp: it is a task runner for Node.js. Grunt does not use streams but saves the temporary code in file products.

The tasks for Bootstrap's Grunt build process can be found in the Gruntfile.js file included in the source files. You can use this file to understand which tasks you will have to run to get your code ready for testing in production.

In this chapter, we use Gulp instead of Grunt since Gulp is considered to be more intuitive and much easier to learn. Gulp is newer than Grunt, but its community is growing fast and new plugins are added every day.

Finally, you should note that task runners that link Gulp and Grunt will make your work easier but are not required to run your tasks on Node.js.

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...

Setting up environments for development and production


Of course, you will need your build process to develop your project, but after that you will run different tasks to get your code ready for production. In the development stage, you need CSS code with CSS sourcemaps for easy debugging, and in the production stage, you probably will minify the CSS code without CSS sourcemaps.

The gulp-environments plugin makes it convenient to create separate environments, such as development and production, to run your tasks in. You can install this plugin by running the following command:

npm install --save-dev gulp-environments

Then add the plugin to your Gulpfile.jsfile, which should look like this:

var environments = require('gulp-environments');

Then assign the environments as follows:

var development = environments.development;
var production = environments.production;

Now you can pass a command line flag --env to set the environment:

gulp build --env development

You can also, conditionally assign...

Installing Bootstrap via Bower


Bower is a package management system for client-side programming. You can use Bower to install Bootstrap's source code and keep it up to date more easily. Initiate Bower by running the following command in your console:

bower init

Answer the questions like those shown in the following screenshot:

After the preceding steps, a bower.json file is created. Then run the following command in your console:

bower install bootstrap#4 --save-dev

The preceding command downloads Bootstrap to the bower_components folder. Notice that jQuery and Tether are also installed since Bootstrap depends on these libraries.

The --save-dev flag writes down Bootstrap as a devDependency into the bower.json file.

Creating a local Sass structure 


Before we can start compiling Bootstrap's Sass code into CSS code, we have to create some local Sass or SCSS files. First, create a new scss subdirectory in your project directory. In the scss directory, create your main project file called app.scss.

Then create a new subdirectory in the new scss directory called includes. Now you will have to copy the bootstrap.scss and _variables.scss from the Bootstrap source code in the bower_components directory to the new scss/includes directory:

cp bower_components/bootstrap/scss/bootstrap.scss scss/includes/_bootstrap.scss
cp bower_components/bootstrap/scss/_variables.scss scss/includes/

Notice that the bootstrap.scss file has been renamed as _bootstrap.scss, starting with an underscore, and has become a partial file now.

Import the files you have copied in the previous step into the  app.scss file as follows:

@import "includes/variables";
@import "includes/bootstrap";

Then open the  scss/includes/_bootstrap.scss file...

Preparing the JavaScript plugins


Some of Bootstrap's components do not only require CSS but also JavaScript. Bootstrap comes with jQuery plugins for commonly used components. Similarly, the navbar requires the collapse plugin and the carousel component has its own plugin too.

Bootstrap's plugins require jQuery and the Tooltips and Popover components also require the Tether library.

In the build process, you can bundle jQuery, Tether, and the plugins into a single file by using the gulp-concat plugin.

You can install the gulp-concat plugin by running the following command in your console:

npm install gulp-concat --save-dev

After that the task that bundles the JavaScript files may look like:

gulp.task('compile-js', function() { 
  return gulp.src([bowerpath+ 'jquery/dist/jquery.min.js', bowerpath+ 'tether/dist/js/tether.min.js', bowerpath+ 'bootstrap/dist/js/bootstrap.min.js','js/main.js']) 
    .pipe(concat('app.js')) 
    .pipe(gulp.dest('./_site/js/')); 
}); 

The preceding...

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...

Creating a static web server


Now that your tasks to compile your HTML, CSS, and JavaScript code are ready, it's time to show and inspect the result in your browser. Browsersync is a module that keeps your browser in sync when developing your code. Browsersync works by injecting an asynchronous script tag right after the <body> tag during initial request.

To use Browsersync with Gulp no special plugin is required; you can simply require() the module.

First install Browsersync by running the following command:

npm install browser-sync gulp --save-dev

Then create a task in your  Gulpfile.js file which may look like the following:

var browser = require('browser-sync');
var port = process.env.SERVER_PORT || 8080;
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){  browser.init({server: './_site', port: port});});

The server task depends on the build task (second argument ['build'] in the preceding code) which means that the build task should run before the server task...

Putting it all together and creating the default task


At the end of the Gulpfile.js file we'll write down some tasks, including the default task, which runs a sequence of tasks of the build process. These tasks may look like the following:

gulp.task('set-development', development.task); 
gulp.task('set-production', production.task); 
gulp.task('test',['scss-lint','validate-html']); 
gulp.task('build', ['clean','copy','compile-js','compile-sass','compile-html']); 
gulp.task('default', ['set-development','server', 'watch']); 
gulp.task('deploy', ['set-production','server', 'watch']); 

The default task sets the environment to development by calling the set-development task first. Then it runs the server task, and starts the watch task after that. Because the server task depends on the build task, the build task always runs before the server task (Browsersync) starts. The deploys task does the same as the default task, but sets the environment to production in the...

Using the build process to finish your project


At the start of this chapter, I have shown you a screenshot of a responsive mobile-first one-page marketing site built with Bootstrap. In the rest of the chapter, I will guide you to build this site using the Gulp build process you have created in the preceding sections.

You will have to split up the HTML page into different parts in accordance with the HTML template structure you have already created.

The project will have a single breakpoint at 768 pixels. For viewports wider than 768 pixels, the navigation menu will become horizontal and other adoptions are made.

The layout template

As already mentioned, you'll use Panini to modularize your HTML code. Panini helps you to avoid code duplications in your HTML code.

Panini is powered by the Handlebars templating language. I highly recommend you to read Panini's documentation at the following URL: http://foundation.zurb.com/sites/docs/panini.html.

The index.html file, our main page, will only contain...

Styling the features


Directly under the hero unit, the design shows three features. A single feature may look like that shown in the following screenshot. Each feature starts with a rounded image, which may contain a photo or icon followed by a heading and a text paragraph. At the end, you will find a button which is a Call to action.

On screens smaller than 768 pixels, the features should display under each other. On wider screens, the features become horizontal and form three equal width columns like those shown in the following screenshot:

Again we create two files: the html/includes/features.html HTML template and a scss/includes/_features.scss Sass partial.

The structure of the HTML code in the html/includes/features.html HTML template may look like the following (notice that in the HTML code, the features are left out):

    <div class="container features"> 
      <div class="row"> 
        <div class="col-md-4"> 
          <!-- first feature --> ...

Styling the footer of your page


Last but not least, we'll have to style the footer links to finalize our project. Again create an HTML template and a Sass partial to do this.

The html/includes/footer.html HTML template should contain HTML like the following:

<footer class="page-footer"> 
      <div class="container">     
        <div class="pull-xs-right"> 
            <a href="https://twitter.com/bassjobsen"><i class="fa fa-twitter fa-lg"></i></a> 
            <a href="https://facebook.com/bassjobsen"><i class="fa fa-facebook fa-lg"></i></a> 
            <a href="http://google.com/+bassjobsen"><i class="fa fa-google-plus fa-lg"></i></a> 
            <a href="http://stackoverflow.com/users/1596547/bass-jobsen"><i class="fa fa-stack-overflow fa-lg"></i></a> 
            <a href="https://github.com/bassjobsen"><i class="fa fa-github fa...
Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore the inner workings of Bootstrap 4 by building different websites
  • Customize your designs by working directly with Bootstrap’s SASS files
  • Leverage Bootstrap’s excellent JavaScript plugins

Description

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.

Who is this book for?

If you are a web developer who wants to build professional websites using Bootstrap 4, then this book is for you. Familiarity with the basics of HTML, CSS, and JavaScript is assumed.

What you will learn

  • Understand how Bootstrap compiles SASS code to static CSS and ES6 code into JavaScript code
  • Integrate Bootstrap into application frameworks such as Angular 2 (AngularJS), Ember, and React
  • Reuse Bootstrap's SASS mixins and set responsive breakpoints in your designs
  • Customize Bootstrap's SASS files and add your own in the process
  • Manage multiple rows of products in a complex responsive grid
  • Create a complete one-page scrolling website using Bootstrap's components and plugins

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Oct 28, 2016
Length: 404 pages
Edition : 2nd
Language : English
ISBN-13 : 9781785889653
Vendor :
Bootstrap
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Oct 28, 2016
Length: 404 pages
Edition : 2nd
Language : English
ISBN-13 : 9781785889653
Vendor :
Bootstrap
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 111.97
Learning Bootstrap 4
€32.99
Bootstrap 4 Site Blueprints
€41.99
Mastering Bootstrap 4
€36.99
Total 111.97 Stars icon

Table of Contents

9 Chapters
1. Getting Started with Bootstrap Chevron down icon Chevron up icon
2. Creating Your Own Build Process with Gulp Chevron down icon Chevron up icon
3. Customizing Your Blog with Bootstrap and Sass Chevron down icon Chevron up icon
4. Bootstrappin' a WordPress Theme Chevron down icon Chevron up icon
5. Bootstrappin' Your Portfolio Chevron down icon Chevron up icon
6. Bootstrappin' Business Chevron down icon Chevron up icon
7. Bootstrappin' E-Commerce Chevron down icon Chevron up icon
8. Bootstrappin' a One-Page Marketing Website Chevron down icon Chevron up icon
9. Building an Angular 2 App with Bootstrap Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.