LearnYoga

Grunt ch. 2 - processing Bootstrap 4 SCSS

In chapter 1 we built a Grunt setup using a relatively simple example Gruntfile. In chapter 2 we will now look at the more complex Gruntfile that they use in the Bootstrap 4 project.

Bootstrap is a popular web front-end framework. It includes CSS and JavaScript that provides basic styling for a web site by setting specific properties of major HTML elements [aka tags, such as p and h1] as well as offering a range of CSS classes and JavaScript functions that provide additional styling tools.

Our first steps will cover getting Bootstrap on our system and setting it up so it can run Grunt. After that, we will take a look at the SCSS (SASS) code in Bootstrap 4 and effect changes in the processed CSS by altering the SCSS file and then processing it into CSS.

We could download the source files from the Bootstrap web site, but for this let's use Git to get the code on our machines.

Type this into your terminal:

git --version

If it gives you a version number (probably higher than 2.0.0), you should be set. Failing that, install Git on your system.

As soon as you are sure you have Git installed on your system, open your terminal on your Mac (this may work also for Windows and Linux but you may have to do things slightly differently) and move into a directory that you want the Bootstrap directory to reside in and type in these commands:

This should install Bootstrap and ensure that we are on the branch we want to be on. Now it's time to take a look at our tooling setup. First, we need to make sure we have a number of things installed. Type this command in:

Now we might already have NodeJS and NPM installed from chapter 1 or elsewhere, but if you want to check that you have them type in these commands:

node --versionnpm --version

If you get version numbers then let's keep moving, otherwise you can follow setup instructions on their web sites.

Now we want to run npm install. You may be required to use sudo (which will lead to you being prompted for your password) so I am including it here. Make sure you are in your /bootstrap directory and type:

sudo npm install

That should install every node module you need. Now we need to install all the Ruby gems needed by using Bundler. First let's see if Bundler is already on your system:

bundler --version

If you don't already have some version installed, type:

gem install bundler

Now let's use Bundler to get the Ruby dependencies in place. Type this into your terminal (while in the /bootstrap directory):

bundle

Last chapter we installed the Grunt command line tools. If you haven't done that yet, type this into your terminal:

npm install -g grunt-cli

Now we can use the Grunt setup that Bootstrap has provided us with. First, we will take a look at the Gruntfile. [The version below is from an alpha version of Bootstrap 4 and the Gruntfile.js in your Bootstrap directory may thus be a bit different.] How this one similar and different to the one in chapter 2?

Obviously this Gruntfile is much more complex than the one in chapter 1. It has numerous tasks rather than just the default one, it uses more plugins and it is specifically configured to interact with the code of the Bootstrap 4 project, taking it from development form to production. It also has a watch task and testing features.

Let's run this Grunt setup by making sure we're in the /bootstrap directory on your computer and calling the default Grunt task:

grunt

This Gruntfile echoes out a lot of information while it's running, so take a look at the output and see how what insights you can gain from watcing it.

Now let's take a look at the /dist subdirectory in your bootstrap directory. In the CSS directory therein, you should see development and minified (.min) versions of the production-ready Bootstrap 4 CSS code (along with their own .map files which you will want to include alongside them when using them on web sites) which the Grunt setup has created based on the underlying SCSS code. Similarly the JavaScript code is available in development and uglified (.min) versions in the js directory.

So let's look into that upstream SCSS (SASS) code in chapter 3 and see how easily we can change how Bootstrap looks.