Loading...

Blog

Bootstrap source in theme

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!

11 Comments on “Bootstrap source in theme”

  • Nam Nguyen Ba Hoang

    says:

    Very helpful update, Actually I’m feel very depressed with Scss compiler, this way will be much more faster

    • Sean VanderMolen

      says:

      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.

        • Sean VanderMolen

          says:

          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:

            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:

    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:

      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:

      Hi Richard,

      it’s fixed in 5.1.2.0. Download latest version in your dashboard.

  • Kemal Sulic

    says:

    Very nice!

  • test test

    says:

    Thank you for your hard work. I’m impressed

Comments are closed.

To top