Bootstrap is best used as a framework from which you derive styles. It has a ton of utility features, but something that is big for me is that it is one of the few frameworks that has full-featured accessibility. I just don't have enough expertise to do all the work to make accessible styles on my own. It's easy to focus on the visual aspect of the design while forgetting accessibility. Bootstrap has some guard rails up to remind us.
So I usually end up customizing bootstrap by using the bootstrap SCSS library and preprocessing that with sassc. You can get it down to a few kb by excluding unused styles or by creating your own scss stylesheet.
And these are preprocessing steps that you do on your workstation while you're creating the design, so it works just fine with static HTML.
I totally agree.
With my personal experience, i always try to customize bootstrap as much as possible, for example: I use my own bootstrap.scss file, exclude all unnecessary components, and customize variable.scss to match with the design.
In doing so, i hardly need to use !important, which is the most should-avoid thing imo.
First you'll want to install it. There are various implementations. I prefer the one written in C but only because it's the easiest for my environment. Then this guide will walk you through most of what you need to know.
The way I learned how to use SCSS was to reference that guide and then look at Bootstrap's variables and observe how they affected included styles in bootstrap.scss. You'll notice in bootstrap.scss you can comment out the imports you don't need.
I knew what it was, but I haven't used it since most of my work is pure HTML, CSS and JS without anything like NodeJS, React or VueJS so I haven't catch up with CSS preprocessors 🤷🏻♂️
I’d kindly suggest you to start using it, it is certainly a one way road.
Don’t think of it as something related to node frameworks. If you build front end, it is simply your right hand for writing, organizing and maintaining your CSS at the same time you speed up the development . You can even reuse your own partial definitions within your CSS project as many times as you want, make global variables.... etc. Also you will be able to split your files into components or pages (your choice) without using the CSS @import statement that, as you sure know, triggers new requests to the server, something that is not a very good practice from a page load optimization point of view. The fewer requests, the better.
Customizing bootstrap is something you’ll learn later, but building everything on pure CSS is not efficient for you, and you’ll end up crazy trying to maintain big projects.
Bootstrap is best used as a framework from which you derive styles. It has a ton of utility features, but something that is big for me is that it is one of the few frameworks that has full-featured accessibility. I just don't have enough expertise to do all the work to make accessible styles on my own. It's easy to focus on the visual aspect of the design while forgetting accessibility. Bootstrap has some guard rails up to remind us.
So I usually end up customizing bootstrap by using the bootstrap SCSS library and preprocessing that with sassc. You can get it down to a few kb by excluding unused styles or by creating your own scss stylesheet.
And these are preprocessing steps that you do on your workstation while you're creating the design, so it works just fine with static HTML.
I totally agree.
With my personal experience, i always try to customize bootstrap as much as possible, for example: I use my own bootstrap.scss file, exclude all unnecessary components, and customize variable.scss to match with the design.
In doing so, i hardly need to use !important, which is the most should-avoid thing imo.
I'm totally gonna test Sass! Can you link a beginner tutorial so I can check it out?
First you'll want to install it. There are various implementations. I prefer the one written in C but only because it's the easiest for my environment. Then this guide will walk you through most of what you need to know.
The way I learned how to use SCSS was to reference that guide and then look at Bootstrap's variables and observe how they affected included styles in bootstrap.scss. You'll notice in bootstrap.scss you can comment out the imports you don't need.
There's an extension for visual studio code called Live SASS compiler that does the trick and it's awfully simple to install.
As for a tutorial, the official site has great documentation and it's, I believe, the best place to start.
You gotta be kidding, so you’ve never seen sass prior to writing this article?
I knew what it was, but I haven't used it since most of my work is pure HTML, CSS and JS without anything like NodeJS, React or VueJS so I haven't catch up with CSS preprocessors 🤷🏻♂️
I’d kindly suggest you to start using it, it is certainly a one way road.
Don’t think of it as something related to node frameworks. If you build front end, it is simply your right hand for writing, organizing and maintaining your CSS at the same time you speed up the development . You can even reuse your own partial definitions within your CSS project as many times as you want, make global variables.... etc. Also you will be able to split your files into components or pages (your choice) without using the CSS @import statement that, as you sure know, triggers new requests to the server, something that is not a very good practice from a page load optimization point of view. The fewer requests, the better.
Customizing bootstrap is something you’ll learn later, but building everything on pure CSS is not efficient for you, and you’ll end up crazy trying to maintain big projects.
Hope it helps :)
Thanks for the kind answer, I really appreciate it!
I will totally check it out and see how much I can improve my work with it, thanks again! 😄