Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
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
R$49.99 R$245.99
eBook Oct 2016 404 pages 2nd Edition
eBook
R$49.99 R$245.99
Paperback
R$306.99
Subscription
Free Trial
Renews at R$50p/m
Arrow left icon
Profile Icon Jobsen Profile Icon David Cochran Profile Icon Whitney
Arrow right icon
R$49.99 R$245.99
eBook Oct 2016 404 pages 2nd Edition
eBook
R$49.99 R$245.99
Paperback
R$306.99
Subscription
Free Trial
Renews at R$50p/m
eBook
R$49.99 R$245.99
Paperback
R$306.99
Subscription
Free Trial
Renews at R$50p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

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 : 9781785881497
Vendor :
Bootstrap
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

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

Packt Subscriptions

See our plans and pricing
Modal Close icon
R$50 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
R$500 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 R$25 each
Feature tick icon Exclusive print discounts
R$800 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 R$25 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total R$ 825.97
Learning Bootstrap 4
R$245.99
Bootstrap 4 Site Blueprints
R$306.99
Mastering Bootstrap 4
R$272.99
Total R$ 825.97 Stars icon
Banner background image

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

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.