Bootstrap color theme

[tjfoerster]

Customize Bootstrap color theme variables with Coocook colors, and then replace color hashes and RGB values with CSS variables in all stylesheets. I think this would greatly facilitate the efficient further development of a clean user interface and corporate design. Also new developers do not have to search for all the used colors in the stylesheet first.

e.g. var(--bs-primary) = #4CAF50 or <button class="btn btn-primary"> creates a styled button with the color #4CAF50

But for that we would have to use SASS. Is that possible? I have not really worked with it yet https://getbootstrap.com/docs/5.1/customize/sass/

[dboehmer]

https://metacpan.org/pod/CSS::Sass seems the be the CPAN dist for SASS that is maintained most actively. I don’t know whether SCSS will be compiled by Perl, server side JS or client side JS.

[MarkusLeupold]

For the start you could simply install Dart Sass or another Sass implementation on your development system and compile the Sass locally before pushing.

If we start customizing Bootstrap in its Sass source for this feature, we should probably do the entire page styling through Sass. Otherwise, we would have small crumbs of changes lying around at different places. Using Sass is also much more error-proof, because it gives us better understanding and control over Bootstrap's structure than CSS does.

For frequent changes on the Sass source, it would be helpful to have some sort of build pipeline. I.e., a build process that compiles the Sass automatically—either when pushing to Git or at application startup.

[MarkusLeupold]

https://metacpan.org/pod/CSS::Sass seems the be the CPAN dist for SASS that is maintained most actively. I don’t know whether SCSS will be compiled by Perl, server side JS or client side JS.

Okay, that would make it easier. But this Sass distribution uses LibSass and the Sass homepage says about it:

LibSass is now deprecated—new projects should use Dart Sass instead.