Table of contents :
Index:
- 1. Visual Studio Code, VSCode, introduction.
- 2. VSCode, install and screen explanation.
- 3. VSCode, Settings.
- 4. VSCode, Settings.json file.
- 5. VSCode, plugins.
- 6. VSCode, plugin: Live Server.
- 7. VSCode, Workspaces.
- 8. VSCode, Project and Project plugins.
- 9. VSCode, Live Sass Compiler.
- 10. VSCode, Live Sass Compiler and Bootstrap.
- 11. VSCode, Watching. To be written.
- 12. VSCode, Other plugins.
- 13. VSCode, Tips for Visual Studio Code.
- 14. VSCode, Usefull Links.
10. VSCode,
Compile Bootstrap with VSCode.
This chapter shows you how to compile a webpage that is styled with Bootstrap, and with some styling of your own.
It DOES NOT explain all ins and outs of how to style with Bootstrap. There are other pages on the web that explain that in more detail.
The focus of this chapter is on what to write, and where to put it, to get Bootstrap to style your page as you want.
10.1. VSCode, Download and install the Bootstrap files.
The first step is to get the Bootstrap files in the right place for compiling with VSCode. Because the documentation links on the Bootstrap Home-page, depend on the Bootstrap version, do the following:Go to the Bootstrap Home page, click on the pink Get Started button, so yo go to the Getting Started page. Open the Getting Started menu on the left side and click on Download, this gives you:
After that, find the bootstrap-5.x.x.zip-file on your system. The x-es tell you the sub-version number you downloaded. It might even be bootstrap-6 or 7 by the time you download it.
The contents of the zip-file looks like this:
First:
find the scss-directory in the zip-file, copy this directory, so each and every file and directory inside it will be in the copy, navigate to the boot5orig-scss directory in your test-environment:
find the dist-directory inside the bootstrap zip-file, copy it, and past that directory in the boot5orig-scss -directory in your testenvironment.
The dist/js directory contains the original Bootstrap js-files from that same page.
And the scss directory contains the original, unmodified, scss-files downloaded from the Bootstrap-page.
Now everything is in place for a simple example with Bootstrap.
10.2. VSCode, simple example with Bootstrap.
We will start with the example of our previous chapter, containing THIS CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Learning HTML description & title tags.</title>
<meta name="description" content="This you get to put what you want. ">
<link rel="stylesheet" href="/dist/css/vscode-basic-styles.css">
</head>
<body>
<h1>Hello World, this is my site !</h1>
</body>
</html>
h1 {
color: darkorchid;
text-decoration: overline;
}
It produced this webpage:
On line 10 of the above code for the HTML-page, inside THIS CODE , we have a link to our own stylesheet.
We will combine that with a link to the original Bootstrap stylesheet inside the dist/css directory we copied in the previous chapter. We put the link to Bootstrap, right before our link. DONT SAVE THE FILE YET !
We also need to link in the Bootstrap js-files. That is done at the very end of our html, just before the closing body-tag. Because Bootstrap needs popper, we insert that too (from the jsdeliver site). That gives us:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Learning HTML description & title tags.</title>
<meta name="description" content="This you get to put what you want. ">
<link rel="stylesheet" href="/dist/css/bootstrap.css">
</head>
<body>
<h1>Hello World, this is my site !</h1>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="/dist/js/bootstrap.min.js"></script>
</body>
</html>
Now suppose we want to change the H1 color back to that purple color. We can do that in the following way:
Inside Bootstrap there is a scss-variable that holds the headings-color for all headings h1 - h6.
If we set that variable to the purple color, our heading will be what we want. Now remember that we declared a boot5vscode/scss directory to hold our own stylesheets. So go to that directory, declare a text-file my-html-head-body-styles.scss and open it in VSCode:
The second line, formats, has two blocks of settings, one for generating the minimized files, and the other for generating the normal expanded css files.
Now we will change our html file:
10.3. VSCode, more extensive Bootstrap example.
Before we go on with the next example, I strongly suggest you read the Bootstrap pages about Customizing with Sass. Together with the pages about: Options, Color, Components and the other chapters from the Customize-sidemenu on the left of that page.They give you a better understanding of how Bootstrap is designed and organized.
In the way we styled our example 1 in the previous chapter, we could only change one thing at a time. Now what if we wanted to change the colour of ALL the headings or change Bootstraps default colour.
We would have to add a lot of extra in our stylesheet. From the Customize pages on the Bootstrap website, you will have learned, that by using and changing the variables of Bootstrap, we can change the look and feel into what we want.
For that we need to import Bootstrap into our own stylesheet in a special way. Lets have a look at the main Bootstrap stylesheet first, it is called bootstrap.scss, and we find it in our boot5vscode/boot5-orig-scss/scss - directory.
The commands @import mean, that on this place a file is linked-in from outside bootstrap.scss, it is compiled, and after that the SASS-compiler returns to the next line in bootstrap.scss to procede with the compilation. Each outside-file might itself contain other imports. So in fact bootstrap.scss is a whole tree of files, an upside-down tree, not just one file. All files are linked together with these imports.
You might have noticed, all imported file-names in the directory itself, start with an underscore, but in the import-statements in the above picture, no underscore is present. SASS interprets files without an underscore as the mainfile of a tree and will compile them on their own. Which will fail if they are dependant of other files. In the import statement however, no underscores must be written.
Now you will understand that something defined inside the file variables, on the second import-line, can and will have effect on each and every file below that import line.
That means that if you want to change something, you have to be aware of where to put that change, to have the effect you want.
As you might have understood from the explanation of Bootstrap variables on the Bootstrap pages, lots of styling in Bootstrap is done by variables, which are, ofcourse, declared in the file variables.
I suggest you open that variables file and have a look at it. You will need it lots of times. So familiarize yourself a bit with it.
Variables inside a scss-file are declared like this:
$this-is-a-variable: $white !deafault;
They start with a variable-name preceded with a dollar-sign and immediately followed bij a colon.
In this case the variable is a colour variable so it is followed bij a colour: $white. After the colour is !default and the statement ends with a semicolon.
Now that !default is important. It means that if the SASS-compiler, at the moment it encounters this variable-name, does not have a variable by that name yet, it will use the value given here, so it will use the white colour.
If it finds another declaration of the same variable-name it already has, it will skip the value found there and use the value it had from the first time that variable was defined.
Now this may sound silly, nobody will declare a variable twice, right???
But because of the tree I mentioned before, it is very well possible that those declarations are in completely separated files. And, more, there might be another definition given on purpose.
Let me explain:
In our example we changed the h1 color into purple. Now suppose we want ALL headings to be purple. We know Bootstrap makes them black. When we look in bootstraps variable file we see there is a variable: $headings-color: null !default;
this results in the black headings. Now if we want headings to be purple, we have to change exactly THAT variable into purple. But we need to change it, BEFORE the SASS compiler gets to this line, so in fact BEFORE it processes the import to the variables-file.
So what we do is this, we create our own my-bootstrap-file inside the directory boot5vscode/scss, which is in fact a copy of the original bootstrap.scss file. Because our file does not reside in the directory where the original bootstrap.sccs file resides, we have to change all imports to point to the original bootstrap files. Like this:
// ********************************************************
// THIS IS THE SPECIAL IMPORT-FILE FOR THE EXTENDED EXAMPLE
// ********************************************************
/*!
* Bootstrap v5.1.1 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
// scss-docs-start import-stack
// Configuration
@import "../boot511-scss/scss/functions";
@import "../boot511-scss/scss/variables";
@import "../boot511-scss/scss/mixins";
@import "../boot511-scss/scss/utilities";
// Layout & components
@import "../boot511-scss/scss/root";
@import "../boot511-scss/scss/reboot";
@import "../boot511-scss/scss/type";
@import "../boot511-scss/scss/images";
@import "../boot511-scss/scss/containers";
@import "../boot511-scss/scss/grid";
@import "../boot511-scss/scss/tables";
@import "../boot511-scss/scss/forms";
@import "../boot511-scss/scss/buttons";
@import "../boot511-scss/scss/transitions";
@import "../boot511-scss/scss/dropdown";
@import "../boot511-scss/scss/button-group";
@import "../boot511-scss/scss/nav";
@import "../boot511-scss/scss/navbar";
@import "../boot511-scss/scss/card";
@import "../boot511-scss/scss/accordion";
@import "../boot511-scss/scss/breadcrumb";
@import "../boot511-scss/scss/pagination";
@import "../boot511-scss/scss/badge";
@import "../boot511-scss/scss/alert";
@import "../boot511-scss/scss/progress";
@import "../boot511-scss/scss/list-group";
@import "../boot511-scss/scss/close";
@import "../boot511-scss/scss/toasts";
@import "../boot511-scss/scss/modal";
@import "../boot511-scss/scss/tooltip";
@import "../boot511-scss/scss/popover";
@import "../boot511-scss/scss/carousel";
@import "../boot511-scss/scss/spinners";
@import "../boot511-scss/scss/offcanvas";
@import "../boot511-scss/scss/placeholders";
// Helpers
@import "../boot511-scss/scss/helpers";
// Utilities
@import "../boot511-scss/scss/utilities/api";
// scss-docs-end import-stack
To change the colour of our H1 heading to purple, we need the variable
$headings-color
as mentioned before. And to make it work, we have to put the change just before the import-call to the variables-file. But this colour change might not be the only one, so it will be better if we would put all changes to variables, into a my-variables.scss -file of our own, and import that just before the import to the bootstrap variables file. We will name the file _my-variables.scss. (do not forget the underscore) So we get:
// ********************************************************
// This is the my-variables file for Bootstrap 5.1.1
// ********************************************************
$headings-color: darkorchid;
// ********************************************************
// THIS IS THE SPECIAL IMPORT-FILE FOR THE EXTENDED EXAMPLE
// ********************************************************
/*!
* Bootstrap v5.1.1 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
// scss-docs-start import-stack
// Configuration
@import "../boot511-scss/scss/functions";
@import "my-variables";
@import "../boot511-scss/scss/variables";
@import "../boot511-scss/scss/mixins";
@import "../boot511-scss/scss/utilities";
Because the _my-variables.scss -file is in the same directory as the my-bootstrap.scss file, we do not need any directory references in this import-statement.
Now the last thing we need is to change our html-file, to work with our newly compiled file.
