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

1. Upload new bootScore parent
2. Download a new child, unzip and copy folder /scss/ to your child /css/scss/
3. Move your custom CSS to _bscore_custom.scss
4. 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.

1. Upload new bootScore parent
2. Download a new child, unzip and copy folder /scss/ to your child /css/scss/
3. Insert your used variables to _bscore_variables.scss but without the @import at the end
4. 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!