Why do I need to install and compile Bootstrap?

deanstreet

deanstreet

Been using Bootstrap's default files via its CSS/JS CDN links, primarily for its responsive grid layouts. Now I would like to customize its colours to my own.

I think that I should
- download the compiled files
- use a custom.scss, and import the default master scss by @import "../node_modules/bootstrap/scss/bootstrap" ;
- change the sass color variables either directly or advisedly in its $theme-colors variable
- watch the custom.scss for a custom.css (sass --watch custom.scss custom.css)
- include and link to the custom.css and default compiled JS files in my webpages

Is it correct? Because I am reading a Bootstrap book that says I need to download the source files, install (npm install bootstrap), and compile them to use. I see Bootstrap as some off-the-shelf CSS and accompanying JS (compiled) files, readily to be linked to, so I don't quite understand what's there to be installed and compiled? Please explain.
 
npm is a more modern way to use packages rather than directly linking to their assets. By doing so, you can control what versions to download via the packages file rather than statically linking to a version that may quickly go out of date.
 
fan27 said:
npm is a more modern way to use packages rather than directly linking to their assets. By doing so, you can control what versions to download via the packages file rather than statically linking to a version that may quickly go out of date.
More...

But I download the source files, and go to the root bootstrap-5.0.2 folder and run npm install bootstrap. Aren't the downloaded files already the version to be used?
 
You should not have to manually download the bootstrap files.

1. Run npm install bootstrap
2. Reference the bootstrap files according the front end framework you are using (i.e. React, HTML, etc.)
 
deanstreet said:
Been using Bootstrap's default files via its CSS/JS CDN links, primarily for its responsive grid layouts. Now I would like to customize its colours to my own.

I think that I should
- download the compiled files
- use a custom.scss, and import the default master scss by @import "../node_modules/bootstrap/scss/bootstrap" ;
- change the sass color variables either directly or advisedly in its $theme-colors variable
- watch the custom.scss for a custom.css (sass --watch custom.scss custom.css)
- include and link to the custom.css and default compiled JS files in my webpages

Is it correct? Because I am reading a Bootstrap book that says I need to download the source files, install (npm install bootstrap), and compile them to use. I see Bootstrap as some off-the-shelf CSS and accompanying JS (compiled) files, readily to be linked to, so I don't quite understand what's there to be installed and compiled? Please explain.
More...

SCSS/other "better" CSS's have to be compiled (or more simply put transpiled) into CSS. That's what the compile step is doing. Without that, browsers won't understand SCSS. You can of course find some ancient bootstrap versions written in CSS but I don't believe that is true today.

Same idea with stuff like typescript. You compile typescript to javascript. Generally you will use something like webpack to do this for you.
 
gaussian said:
SCSS/other "better" CSS's have to be compiled (or more simply put transpiled) into CSS. That's what the compile step is doing. Without that, browsers won't understand SCSS. You can of course find some ancient bootstrap versions written in CSS but I don't believe that is true today.

Same idea with stuff like typescript. You compile typescript to javascript. Generally you will use something like webpack to do this for you.
More...

I am not sure if compilation simply refers to the SASS-->CSS step (I call that watch instead of compile). If that's what it says, fine. Maybe they assume you would also change some JS scripts as well as SASS variables, so it involves some build into boostrap.min.ss and boostrap.bundle.min.js; but if only SASS is changed, then it can simply be watched and a new custom.css to be used.
 
deanstreet said:
I am not sure if compilation simply refers to the SASS-->CSS step (I call that watch instead of compile). If that's what it says, fine. Maybe they assume you would also change some JS scripts as well as SASS variables, so it involves some build into boostrap.min.ss and boostrap.bundle.min.js; but if only SASS is changed, then it can simply be watched and a new custom.css to be used.
More...

Watch is a command. Compile is the technical process being performed. I think you are confused about lingo.
 
gaussian said:
Watch is a command. Compile is the technical process being performed. I think you are confused about lingo.
More...

It's compilation behind the scene but I like calling scss-->css watching. If it is all that's it to it, I think calling Bootstrap compilation misleading. It is just converting sass-->css and minifying any javascripts modified.
 
deanstreet said:
I think calling Bootstrap compilation misleading. It is just converting sass-->css and minifying any javascripts modified.
More...

Yes, it's "converting" SCSS to CSS through the use of a formal grammar. In Computer Science this is called "compilation". So, I think you are getting confused in the terminology. It's not incorrect (though inaccurate) to call it converting, just know you need to understand that the people who wrote bootstrap are speaking a different language and computer scientists call the conversion of one language to another compiling, not converting.

Minification is an example of conversion. In reality, it's compression but you'd be more accurate calling minification conversion than you would with SCSS. SCSS -> CSS is certainly compilation by the strictest definition of the term.
 
You must log in or register to reply here.
Back
Top