Bootstrap source in theme

September 29, 2021 / May 14, 2024 by Basti | 11 Comments on Bootstrap source in theme

Yes, we did it! We included Bootstrap source and scssphp compiler in theme. v5.1.1.1 makes the “Bootstrap Sass template for VSCode” obsolete and it’s removed from the shop. Everyone can edit Bootstrap direct in the theme now.

No Gulp, Node or other technical stuff is needed. Simply add your CSS/SCSS, variables or mixins with the editor of your choice, save and compiler starts working. Check out the new docs for some examples.

Motivation

Many users did CSS overrides for customising instead creating their own Bootstrap. Overrides are very hard, because in child the style.css was loaded after bootstrap.min.css and Bootstrap uses many !important in utilities. In conclusion, overrides in that way are not a good idea.

By this update it is very easy to adjust Bootstrap correctly. It’s supposed to encourage you to use variables, build faster and better websites, and yes, normal CSS can be used as well. Just give it a try and add following variable to _bscore_variables.scss.

$primary: #FF0000;

Save file and reload your page. It’s magic

How to update

We recommend to update theme and child on a testing site first. If all works fine, upload your updated child to the live site and update bootScore. Backup your site before doing anything!

bootScore

Update doesn’t break your child – for now. In this release the style.css and fontawesome.min.css are excluded in compiled CSS. After a transition period we will include both files in compiled CSS too. So, we recommend to add new Sass feature to your child soon for further updates.

bootScore Child / bootCommerce Child

Adding the Sass feature to your child is simple. In conclusion, just download a child-theme and copy folder /scss/ to your child /css/scss/. But it differs a bit if you enqueued your own bootstrap.min.css with VSCode template or not.

If you used CSS overrides

Upload new bootScore parent
Download a new child, unzip and copy folder /scss/ to your child /css/scss/
Move your custom CSS to _bscore_custom.scss
Add following code to child functions.php

// Overide bootstrap.min.css in child-theme
function bootscore_replace_bootstrap() {

    // Dequeue parent-theme bootstrap.min.css
    wp_dequeue_style( 'bootstrap' );
    wp_deregister_style( 'bootstrap' );

    // Enqueue new bootstrap.min.css in child-theme
    wp_enqueue_style( 'child-theme-bootstrap', get_stylesheet_directory_uri() .'/css/lib/bootstrap.min.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'bootscore_replace_bootstrap', 20 );

If you enqueued your own bootstrap.min.css

This will replace your compiled bootstrap.min.css. Make sure that you keep a copy of your child.

Upload new bootScore parent
Download a new child, unzip and copy folder /scss/ to your child /css/scss/
Insert your used variables to _bscore_variables.scss but without the @import at the end
Move your custom CSS to _bscore_custom.scss

What else?

The whole theme got reformatted.
New language: Türkçe, thanks to Murat Esgin.
Did you notice that Scrollspy now works completely fine, even if DOM is changed? In section ~~#two~~ is an Isotope now. Click there a filter-button to remove some cards and scroll up or down. Menu items are now highlighted correctly when scrolling to another section.

PS. If you like what you use, leave a star at GitHub

Have a great day!

Tagged

Bootstrap Theme

WooCommerce 9

WooCommerce 9 updates the navigation.php template. Although we are not ready to publish the next release yet, we have a patch with the updated file.

Bootscore 6.0.0-beta1

Discover powerful filters for detailed editing, an enhanced offcanvas cart, block widgets, a new top bar widget position, our sleek new logo and more.

WooCommerce 8.6

WooCommerce 8.6 fixes the bugs which came with v8.5. Presently, we're actively developing Bootscore 6, packed with exciting new features.

WooCommerce 8.5 issues

We recommend to downgrade to WooCommerce 8.4 due to critical bugs in version 8.5. For users on 8.5, a temporary patch for the theme is available.

Bootscore 5.3.4

This update, with Bootstrap 5.3.2, includes many minor bug fixes and improvements. Header actions in WooCommerce are enhanced for a better shopping experience.

Bootscore 5.3.3

This release removes three WooCommerce templates. One will be updated in the upcoming 8.1 release. It also includes minor bug fixes and improvements.

bs Isotope 6

Version 6 is here! Isotope plugin has been completely refactored from ground up, including numerous improvements, useful new features and a new template.

Bootscore 5.3.2

This update brings Bootstrap 5.3.1, removes two WooCommerce templates, and includes minor improvements. Notably, we added related posts through bs Swiper.

Bootscore 5.3.1

This release removes certain WooCommerce templates, updates two templates for the upcoming 7.9 release, and includes minor bug fixes and improvements.

Bootscore 5.3.0

Bootstrap 5.3 is now stable and ready to go! As almost everyone knows, this update comes with an included dark mode that is far better than our previous dark mode plugin.

Bootscore 5.2.3.4

This release ships two important bugfixes, two more widget positions and a fluid layout function.

Bootscore 5.2.3.3

This release ships a refreshed loop and sidebar, Font Awesome 6.4.0 plus shortcode, removes 6 WooCommerce templates and has many improvements and minor bugfixes.

Nam Nguyen Ba Hoang
says:
September 30, 2021 at 17:08
Very helpful update, Actually I’m feel very depressed with Scss compiler, this way will be much more faster

Sean VanderMolen
says:
September 30, 2021 at 17:59
This is a great update. Looking forward to having compilation built into the theme. Would it be possible to have an advanced options file for variables that we could choose to enqueue? If you want to add colors or breakpoints, you have to insert those variables after importing functions, then import the right source files, then add your custom colors or functions etc.

Basti
says:
September 30, 2021 at 18:16
Hi Sean,
what do you mean exactly with an advanced options file? You can insert any Bootstrap variable you like. On the docs page https://bootscore.me/documentation/theme/bootstrap-css-sass/ are some more examples. You will find all available Variables on each Bootstrap docs page at the bottom. For example button variables https://getbootstrap.com/docs/5.1/components/buttons/#variables.
Does that help?

Sean VanderMolen
says:
October 1, 2021 at 7:48
My example is when you need to use a function. ( I believe merge the maps is a function )
$custom-colors: (
“super-red”: #FF0000,
“led-blue”: #0066CC,
“glossy-silver”: #BBC2CC,
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
From the docs, and also, the only way I’ve ever been able to get it to work compiling in VSCode was to follow their example where you layout the custom.scss file like so
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import “../node_modules/bootstrap/scss/functions”;
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import “../node_modules/bootstrap/scss/variables”;
@import “../node_modules/bootstrap/scss/mixins”;
@import “../node_modules/bootstrap/scss/root”;
// 4. Include any optional Bootstrap CSS as needed
@import “../node_modules/bootstrap/scss/utilities”;
$custom-colors: (
“super-red”: #FF0000,
“led-blue”: #0066CC,
“glossy-silver”: #BBC2CC,
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
@import “../node_modules/bootstrap/scss/reboot”;
@import “../node_modules/bootstrap/scss/type”;
@import “../node_modules/bootstrap/scss/images”;
@import “../node_modules/bootstrap/scss/containers”;
@import “../node_modules/bootstrap/scss/grid”;
@import “../node_modules/bootstrap/scss/helpers”;
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utililies.scss`
@import “../node_modules/bootstrap/scss/utilities/api”;
// 6. Add additional custom code here

Basti
says:
October 4, 2021 at 10:07
You can select them in parent-theme in /css/scss/bootstrap/bootstrap.scss. But not recommended, because bootScore needs all of them and your selection will overwritten by the next update.

RICHARD BULL
says:
October 3, 2021 at 1:59
On a clean install with latest files, what is this warning about? :
Warning: filemtime(): stat failed for /home/customer/www/richardb307.sg-host.com/public_html/wp-content/themes/bootscore-main/css/lib/bootstrap.min.css in /home/customer/www/richardb307.sg-host.com/public_html/wp-content/themes/bootscore-main/functions.php on line 249
http://richardb307.sg-host.com/

Basti
says:
October 4, 2021 at 10:15
To be honest, no idea yet. Usually there should be no problem. I would check this:
1. Is your debug mode active? If yes, deactivate it.
2. Activate parent theme instead of child.
3. Reinstall child.
4. Add something to _bscore_custom.scss to start compiler
4. Transfer site to another server.
Basti
says:
October 6, 2021 at 11:12
We work on a fix https://github.com/bootscore/bootscore/issues/21
Basti
says:
October 7, 2021 at 19:13
Hi Richard,
it’s fixed in 5.1.2.0. Download latest version in your dashboard.

Kemal Sulic
says:
November 5, 2021 at 4:30
Very nice!
test test
says:
November 10, 2021 at 15:58
Thank you for your hard work. I’m impressed

Comments are closed.

Login

Bootstrap source in theme

Motivation