Gulp, Sass, and Bootstrap

This tutroial is part of a series of lessons on Node Package Manager.

In this lesson we'll use NPM to install Bootstrap into our project. Then we'll customize the colors in the Bootstrap theme with the help of Gulp and SASS.

We'll start out by using NPM to install Bootstrap. Open a terminal and navigate into the 'npm' folder

npm install bootstrap --save

Now delete everything in main.scss (in the src/css folder) and replace it with this:

@import "../../node_modules/bootstrap/scss/bootstrap";

Enter the gulp command to 'watch' for changes to the main.scss file (when you save changes to main.scss, it will automatically run the task to compile it into main.css):

npx gulp watchSass

Now save the changes you made to main.scss (if you already did this, you can just add a new empty line to the file and then save it to trigger the task that compiles it to main.css).

If you look in main.css you'll see that the Bootstrap CSS code has compiled into main.css

Now add a page named bootstrap-colors.html to the src directory, and put this code in it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Colors</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <h1>Bootstrap Colors</h1>
    <h2>Text Colors</h2>
    <p class="text-primary">.text-primary</p>
    <p class="text-secondary">.text-secondary</p>
    <p class="text-success">.text-success</p>
    <p class="text-danger">.text-danger</p>
    <p class="text-warning">.text-warning</p>
    <p class="text-info">.text-info</p>
    <p class="text-light bg-dark">.text-light</p>
    <p class="text-dark">.text-dark</p>
    <p class="text-body">.text-body</p>
    <p class="text-muted">.text-muted</p>
    <p class="text-white bg-dark">.text-white</p>
    <p class="text-black-50">.text-black-50</p>
    <p class="text-white-50 bg-dark">.text-white-50</p>
    
    <h2>Background Colors</h2>
    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
</body>
</html>

Look at the bootstrap-colors.html page in the browser.

Now go back to main.scss and add this code BEFORE the import statement:

//Override the default theme colors for bootstrap:
// Courtesy of themestr at: https://themestr.app/theme

// import web fonts
@import url(https://fonts.googleapis.com/css?family=Muli:200,300,400,700);
$font-family-base:Muli;
@import url(https://fonts.googleapis.com/css?family=Oswald:200,300,400,700);
$headings-font-family:Oswald;

// if you aren't using Bootstrap grids, you can set this variable to false:
$enable-grid-classes:true;

// override the theme colors
$primary:#2f3c48;
$secondary:#6f7f8c;
$success:#3e4d59;
$danger:#cc330d;
$info:#5c8f94;
$warning:#6e9fa5;
$light:#eceeec;
$dark:#1e2b37;

I used the Themestr bootstrap color generator to assign colors to SASS variables. If you reload bootstrap-colors.html in the browser, you should see a new set of colors.

Your custom CSS code should go under these variables. And note that you should make use of the variables in your custom CSS code

NEXT TUTORIAL: Mocking a Web Service