Bootstrap source code is included in the theme and can be edited on the fly without using Gulp, Node, commands or any other technical stuff. Just add your styles, save and the built-in scssphp compiler will do the trick.
Contents
How it works
If you edit one of the files in your child-theme folder /assets/scss/
, the compiler fetches source from parent-theme and compiles it with your custom code to child-theme /assets/css/main.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.
_bootscore-variables.scss
In _bootscore-variables.scss
you can change the default variables of Bootstrap. Available variables can be found in _variables.scss and _variables-dark.scss.
Variables replaces compiled Bootstrap CSS snippets in main.css.
Simple
Add following variable to _bootscore-variables.scss
, save and refresh your page. All primary blue color is now red.
$primary: #FF0000;
Advanced
Following variables are a good starting point to edit your theme in more detail, included color-system, border-radius, navbar, 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;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
// scss-docs-start color-variables
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
// scss-docs-start theme-color-variables
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
// Settings for the `<body>` element.
$body-bg: $white;
$body-color: $gray-900;
$body-tertiary-color: rgba($body-color, .5);
$body-tertiary-bg: $gray-100;
// Dark mode
$body-bg-dark: $gray-900;
$body-color-dark: $gray-500;
$body-tertiary-color-dark: rgba($body-color-dark, .5);
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%);
// Navbar
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
// Border radius
$border-radius: .375rem;
$border-radius-sm: .25rem;
$border-radius-lg: .5rem;
$border-radius-xl: 1rem;
$border-radius-2xl: 2rem;
$border-radius-pill: 50rem;
// Checkboxes
$form-check-input-border-radius: .25em;
// Style anchor elements.
$link-decoration: underline;
$link-hover-decoration: null;
// Fonts
$font-family-base: 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";
// Headings & display
$headings-font-family: null;
$headings-font-weight: 500;
$display-font-weight: 300;
_bootscore-custom.scss
Add your own CSS or SCSS in _bootscore-custom.scss
. Because this file is compiled after Bootstrap, you’re also able to use Bootstrap mixins for better code.
Code overrides or extends Bootstrap compiled CSS snippets in main.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(--#{$prefix}light);
background-color: var(--#{$prefix}dark);
a {
color: var(--#{$prefix}danger);
}
h2 {
a {
color: var(--#{$prefix}warning);
}
}
}
Mixins
@include media-breakpoint-down(md) {
body {
color: var(--#{$prefix}danger);
background-color: var(--#{$prefix}dark);
}
}
@include media-breakpoint-up(md) {
body {
color: var(--#{$prefix}success);
background-color: var(--#{$prefix}light);
}
}
.btn-red {
@include button-variant(#EF4444, #EF4444);
}
Extend
@extend
is a powerful Sass function to add Bootstrap styles to another classes. For example, using a WordPress plugin with custom button styles and it’s not possible to change the classes in the plugin HTML. Instead of unhandy changing the classes with JavaScript, the styles can simply added to the button by extend.
.plugin-button-class {
@extend .btn;
@extend .btn-primary;
}
WooCommerce Colors
Bootscore uses custom variables to override WooCommerce colors with a fallback to Bootstrap variables. It first searches if var(--#{$prefix}wc-price)
is defined in your child. If not, Bootstrap color var(--#{$prefix}secondary-color)
is used. When inspecting the site, you will find something like this:
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.card .price {
color: var(--bs-wc-price, var(--bs-secondary-color));
}
To use custom colors, just add them to the :root
:
:root {
--#{$prefix}wc-price: #339900;
}
_bootscore-utilities.scss
New in v6
This file allows to create custom utilities using the Bootstrap Utility API. For example, a responsive border-radius
:
$utilities: map-merge($utilities,
("rounded": (responsive: true,
property: border-radius,
class: rounded,
values: (null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill))),
));
Creates this classes:
rounded-md
rounded-md-0
...
rounded-lg
rounded-lg-0
rounded-lg-1
rounded-lg-2
rounded-lg-3
rounded-lg-4
rounded-lg-5
...
main.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 main.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.
editor-style
New in v6
This registers the compiled main.css
to the Gutenberg editor, ensuring that the backend has the same styles as the frontend by using classes in the block’s Advanced tab:
There are known minor issues with styles for cards and badges in the backend because the editor, for example, has problems displaying something like display: inline-block;
correctly. However, both components work well in the frontend. You may want to take a look at our new prebuilt Block patterns.
theme.json
New in v6
The theme.json
file adds the defined colors from _bootscore_variables.scss
file to the block editor.
Note that theme.json
uses fixed variables like var(--bs-primary)
. If you change the bs-
prefix, for example, to $prefix: myprefix-;
, the colors won’t work.
scssphp
Developer mode
If the website is under development, it is helpful to enable developer mode. Use it not on a live site, because dev mode slows down page load. To set the environment to development, add the following line to your wp-config.php
:
// Dev mode to force recompile scss and add source map
define('WP_ENVIRONMENT_TYPE', 'development');
- scssphp starts compiling when one file in folder /scss/ is changed, but not if a file in a subfolder is changed. By using developer mode, scssphp compiles on every page load. This is also useful if, for whatever reason, scssphp stops compiling when a scss file is modified.
- Developer mode creates a source map
/css/main.map
.
Disable environment check
Environment check can be disabled (don’t always compile in development or local). This is a known issue using LocalWP compiling SCSS takes +30s. Use a constant in wp-config.php
or a filter in functions.php
.
wp-config.php
:
// Disable environment check
define('BOOTSCORE_SCSS_SKIP_ENVIRONMENT_CHECK', true);
functions.php
:
// Disable environment check
add_filter('bootscore_scss_skip_environment_check', '__return_true');
Disable scssphp
If you don’t want to use scssphp, e.g. creating a rtl site and scssphp doesn’t support rtl, you can disable scssphp and use another compiler like Gulp. Use a constant in wp-config.php
or a filter in functions.php
.
wp-config.php
:
// Disable scssphp
define('BOOTSCORE_SCSS_DISABLE_COMPILER', true);
functions.php
:
// Disable scssphp
add_filter('bootscore_scss_disable_compiler', '__return_true');
Errors
If something in your code went wrong, for example a missing close }
or ;
, compiler will show an error in frontend.
Something went wrong with the SCSS compiler.
Enable developer mode to get detailed information about what’s happened. 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/assets/scss/_bootscore-custom.scss on line 32, at column 0
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.You can insert the colors directly as well.
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!