Loading...

Bootstrap / CSS / Sass

Bootstrap source code is included in the theme and can be edited on the fly without using Gulp, Node, commands or other technical stuff. Just add your styles, save and the built-in scssphp compiler will do the trick.

How it works

If you edit one of the files in your child-theme folder /css/scss/, the compiler fetches source from parent-theme and compiles it with your custom code to child-theme /css/lib/bootstrap.min.css. Just refresh your page and view result. This may take a few seconds, because compiler merges Bootstrap with your custom code on every change from scratch.

_bscore_variables.scss

In _bscore_variables.scss you can change the default variables of Bootstrap. Available variables can be found in Bootstrap docs on each page at the bottom. For example if you want to edit card component, check here: https://getbootstrap.com/docs/5.1/components/card/#variables

Variables replaces compiled CSS snippets in bootstrap.min.css.

Simple

Add following variable to _bscore_variables.scss, save and refresh your page. All primary blue color is now red.

$primary: #FF0000;

More

Following variables are a good starting point to edit your theme more detailed, included color-system, border-radius, links and fonts. Note that this are the default Bootstrap values. If you just copy them to your file and refresh page, you will see no changes. Start by changing the $blue color value.

// Color system
// scss-docs-start gray-color-variables
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;
// scss-docs-end gray-color-variables

// scss-docs-start color-variables
$blue:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #198754 !default;
$teal:    #20c997 !default;
$cyan:    #0dcaf0 !default;
// scss-docs-end color-variables

// scss-docs-start theme-color-variables
$primary:   $blue !default;
$secondary: $gray-600 !default;
$success:   $green !default;
$info:      $cyan !default;
$warning:   $yellow !default;
$danger:    $red !default;
$light:     $gray-100 !default;
$dark:      $gray-900 !default;
// scss-docs-end theme-color-variables

// Body
// Settings for the `<body>` element.
$body-bg:       $white !default;
$body-color:    $gray-900 !default;

// Border radius
// scss-docs-start border-radius-variables
$border-radius:                     .25rem !default;
$border-radius-sm:                  .2rem !default;
$border-radius-lg:                  .3rem !default;
// Checkboxes
$form-check-input-border-radius:    .25em !default;
// scss-docs-end border-radius-variables

// Links
// Style anchor elements.
$link-decoration:       underline !default;
$link-hover-decoration: null !default;

// Fonts
// scss-docs-start font-variables
$font-family-sans-serif:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:     SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

$headings-font-weight:  500 !default;
$display-font-weight:   300 !default;
// scss-docs-end font-variables

_bscore_custom.scss

Add your own CSS or SCSS in _bscore_custom.scss. Because this file is compiled after Bootstrap, you’re also able to use Bootstrap mixins for better code.

Code overrides or extends compiled CSS snippets in bootstrap.min.css.

CSS

.card {
    color: var(--bs-light);
    background-color: var(--bs-dark);
}

.card a {
    color: var(--bs-danger);
}

.card h2 a {
    color: var(--bs-warning);
}

SCSS

The same result like above using SCSS syntax.

.card {
	color: var(--bs-light);
	background-color: var(--bs-dark);
	a {
		color: var(--bs-danger);
	}
	h2 {
		a {
			color: var(--bs-warning);
		}
	}
}

Mixins

@include media-breakpoint-down(md) {
    body {
        color: var(--bs-danger);
        background-color: var(--bs-dark);
    }
}

@include media-breakpoint-up(md) {
    body {
        color: var(--bs-success);
        background-color: var(--bs-light);
    }
}

.btn-red {
    @include button-variant(#EF4444, #EF4444);
}

bootstrap.min.scss

This file collects all other scss files and source from parent. Add more using @import. Create file _header.scss with an underscore and place it in same folder. Add @import "header"; to bootstrap.min.css and do your styles for the header in _header.scss. Add as many files as you want, all styles will be compiled to one single CSS file.

Errors

If something in your code went wrong, for example a missing close } or ;, compiler will show an error in frontend. The error indicates in which file and line the error occurred.

bootScore SCSS Compiler - Caught exception:

unclosed block: failed at `` /Applications/MAMP/htdocs/my-new-wordpress/wp-content/themes/bootscore-child/css/scss/_bscore_custom.scss on line 32, at column 0

Update Bootstrap

bootScore is always updated to the latest Bootstrap version. To get latest Bootstrap in your child, just recompile yours. Recompile means that just something in your SCSS files have to be changed.

20 Comments on “Bootstrap / CSS / Sass”

  • Lo Rednib

    says:

    Thanks Basti, as I told you yesterday, this is exactly what I was looking for since last week.
    With this new version you make my life easier!
    Thank you for your good work 👍

    • Basti

      says:

      Most of this work was done by Justin. So, let’s do a big thank you to him 🙏 👍

  • Lo Rednib

    says:

    Thanks Justin ! 🙏
    I would like to change the main color, according to the 4 main pages of the brands of the site.
    4 brands that each have their own color theme.
    For each brand there are corresponding products and they must have the associated color of their brand.
    The 4 brands and their corresponding color:
    `
    $cl: #3c3c3b;
    $lw: #71110f;
    $mg: #113e65;
    $gv: #bd8628;
    $primary: $default_color;
    `
    Do you think this is possible ?

    • Basti

      says:

      Think not in that way. But you can create 4 different child-themes and assign it to the specific pages with Multiple Themes plugin https://wordpress.org/plugins/jonradio-multiple-themes/. This plugin is used on bootscore.me as well. Check in navbar Theme > Header Nav Default. There is the bootscore-child while all other pages using the bootcommerce-child.

      • Lo Rednib

        says:

        Thanks.
        I didn’t know you could do that.
        I’ll have a look. Otherwise I’ll try to impose a colour scheme for the whole site 🙂

  • Lo Rednib

    says:

    Hi Basti.
    I don’t know what I have done but I’ve got this error now :
    Warning: filemtime(): stat failed for …/wp-content/themes/bootscore-main/css/lib/bootstrap.min.css in …/wp-content/themes/bootscore-main/functions.php on line 249
    And there is no bootstrap.min.css in the folder bootscore-main/css/lib/, I’ve checked on your github.
    I’ve already deleted the bootscore-main and upoladed again from your github repo.
    Any idea ?

    • Basti

      says:

      Try to add something to your .scss file and save. Compiler should start to create the bootstrap.min.css. This file doesn‘t exist anymore by default. It will be created when you upload the theme or change something.

      • Lo Rednib

        says:

        It’s seems the scssphp is not doing his job actually.

        • Lo Rednib

          says:

          I think I know, I must have invalid syntax somewhere in my scss. But it is not in bootscore, I’ve check it all.
          I’ll find it

          • Basti

            says:

            It‘s not an invalid syntax, this will throw different error. Can you please share a link to your site?

            • Lo Rednib

              says:

              I’m in localhost Basti…
              I’ve try to open only your bootscore-main in my download folder to see if the scssphp is working but when I change something in a scss folder it doesn’t compiled anymore … I’m lost

              • Lo Rednib

                says:

                I don’t need to have watch sass anymore, right ?

                • Lo Rednib

                  says:

                  Hi Basti,
                  I’ve try a fresh install with a new WordPress and add bootscore-main and bootcommerce-child last version from your Github.
                  bootcommerce-child is compiled the bootstrap.min.css but not bootscore-main.
                  So I still have this issue :
                  Warning: filemtime(): stat failed for …/scssbootstrap/wp-content/themes/bootscore-main/css/lib/bootstrap.min.css in …/scssbootstrap/wp-content/themes/bootscore-main/functions.php on line 249
                  So, it’s looking for the bootstrap.min.css in the parent folder but there is not

                  • Basti

                    says:

                    Hi Lo,

                    ok, we get closer.

                    1. You do not need the watch sass anymore. Just change something in a .scss file and save.
                    2. Activate parent-theme one time and refresh page.
                    3. Transfer your project to a live server.
                    4. Please open an issue at Github https://github.com/bootscore/bootscore/issues/new. So we can discuss if it’s better to ship a compiled css file in installation zip.

                    Edit. Just one more test: Copy the compiled bootstrap.min.css from your child to parent /css/lib/.
                    Edit. Which php version is running on your localhost?

                    • Lo Rednib

                      says:

                      => The problem was never delete your bootstrap.min.css in your Parent Theme. And active first the Parent Theme. Because when you have you Child Theme scssphp seems to stop compiling the parent’s one

                      => If you deleted it like I did. Unactive the Child Theme and make a change in a scss file to force the scssphp to compile a new boostrap.min.css in the parent folder. Then active your Child Theme again.

  • dfgdsfgsdf dfsgdsfg

    says:

    I am using the child theme, and trying to change some of the colour variables. I am editing the _bscore_variables.scss file, but no matter what I change, there is no difference.

    For example, if my _bscore_variables.scss contains

    $body-bg: $black !default;

    there is no difference when refreshing the page.
    I know the file is being loaded because if I intentionally create a syntax error, I get an error message.

    Any idea why this might happen?

    • Basti

      says:

      Did you define $black? Sass is based on order.

      $black: #000000;
      $body-bg: $black !default;
      

      You can insert the colors directly as well.

      $body-bg: #000000;
      

      Check here https://github.com/bootscore/bootscore/issues/21

      • dfgdsfgsdf dfsgdsfg

        says:

        Thank you for the reply.

        Yes, $black is defined. I should have clarified, I copied the example from above, the one directly underneath “Start by changing the $blue color value.” and changed $white to $black for $body-bg. I also tried a lot of other changes with no success, including directly inserting the hex colours.

        I believe it is compiling when I make the changes because I get the 2-3 second extra load time when I make a change. I don’t get any errors like the ones in that github issue. I will get errors if I put the wrong syntax however, so I think the file is being loaded.

        • Basti

          says:

          What does the compiler error exactly say? Which theme version do you use?

  • Effectiva

    says:

    Very nice, thank you!

Comments are closed.

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information