Theme using CSS variables

Edited, the content I posted was irrelevant.
The following comments from friends are sensational!

Why not just customize using SASS? I have found it to be a lot easier to get the look(s) I am looking for.

https://getbootstrap.com/docs/5.0/customize/overview/

It’s just that I don’t know how to use SASS, I need to learn.

Ever since I started using SASS I have reduced my development time. Here is a good tutorial I have recommended to quite a few people.

Here is one for Bootstrap

Cheers.

3 Likes

Thanks, I’m going to take a sass course, it’s very useful.

Another really good person that does tutorials is Kevin Powell. A little geeky maybe, but he knows his CSS and Sass very well and has lots of free tutorials online. I was in the same boat as you Gilmar and I finally broke down and took the time and I haven’t looked back. Works great when using Visual Studio Code too for external editing to make it easier.

My first hurdle was getting past that I couldn’t access the CSS directly when using Sass, but … the CSS does show up in the Style editor so it’s not all as bad as I thought it would be. Good luck on your new adventure! It’s quite fun I must say!

2 Likes

Yesterday I started a course on SASS and SCSS, I’m impressed with how easy it is to generate the CSS code, I haven’t even completed 1/4 of the course yet, but I discovered another world.
Finishing this one I’m going to make a VS Code, impressive speed and practicality that the professor codes, many shortcuts that avoid unnecessary typing.

Friend, if I hadn’t done programming in my youth, I would be going crazy!
SASS isn’t just making a cascading style sheet, CSS, it’s complex programming!
I’m loving learning this!
@jo-r

I agree. It allows me to reduce my dev time.

  • Make a copy of this folder
  • Make changes to custom.scss - normally only my color scheme (see below)
    • Add negative margins
    • Button variations
    • etc.
    • Preview index.html - just a page with all of the Bootstrap components
  • Compile and import main.css into BSS

bootstrap_template_folder

// Custom.scss
// Theme colors
$body-bg: #fff;
$primary: #53ccec;
$secondary: #fef7d9;
$success: #94D82D;
$info: #b5e6f5;
$warning: #FCC419;
$danger: #FF6B6B;
$light: #ffff;
$dark: #0e272e;
$theme-colors: ("primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark);
// Custom colors
$primary-shade-40: #2a748b;
$primary-shade-60: #1c4d5c;
$primary-shade-80: #0e272e;
$primary-tint-40: #90daf1;
$primary-tint-60: #b5e6f5;
$primary-tint-80: #daf3fa;
$secondary-shade-40: #98947d;
$secondary-shade-60: #656253;
$secondary-shade-80: #33312a;
$secondary-tint-40: #fefae3;
$secondary-tint-60: #fefbec;
$secondary-tint-80: #fffdf6;
// Modification colors
// Map theme colors and add custom colors
$custom-colors: ("primary-shade-40": $primary-shade-40, "primary-shade-60": $primary-shade-60, "primary-shade-80": $primary-shade-80, "primary-tint-40": $primary-tint-40, "primary-tint-60": $primary-tint-60, "primary-tint-80": $primary-tint-80, "secondary-shade-40": $secondary-shade-40, "secondary-shade-60": $secondary-shade-60, "secondary-shade-80": $secondary-shade-80, "secondary-tint-40": $secondary-tint-40, "secondary-tint-60": $secondary-tint-60, "secondary-tint-80": $secondary-tint-80);
$theme-colors: map-merge($theme-colors, $custom-colors);
// Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

// Add custom code after this
body {
    font-family: 'Helvetica', sans-serif;
    color: $primary-shade-80;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

footer {
    margin-top: auto;
}
4 Likes

On another occasion I will, I promise!
There are still a few hours left of the course and I don’t want to lose focus.
The course is not focused on Bootstrap, but on SASS!
And without wanting to be aggressive, the course is introducing me to a world where Bootstrap CSS will become expendable, I’ll be able to make my own lean and fully functional CSS, with lots of CSS for different pages.
Friend, your tips were essential to open my vision, this new world I’m getting to know is amazing!