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.

This update includes breaking changes and requires migration. Read through this blog post in its entirety first and follow the migration guide if you want to migrate your existing site to v6.

Version 6 is here and it’s packed with many useful new features and improvements. Nearly every file have been reviewed, moved, renamed or improved to correcting mistakes made in the past. So in conclusion, it is a new theme.

It’s being released as beta1 because it hasn’t been tested by a wider community yet. This doesn’t imply the presence of serious bugs or experimental features, but there might be some minor adjustments and more features that will be addressed in the stable v6 release. Start using it now and see what to expect.

Filters

Bootscore now includes numerous powerful filters, allowing for detailed editing without the need to override templates in child. For example all container classes can be modifed at once, individual container classes within a single file, or across multiple files. Edit navbar bg, breakpoints and button classes, change main content breakpoint and columns or create a complete new footer. Everything is now possible with small functions without touching a template file.

Want to have a navbar like this?

Add following snippets to child’s functions.php:

/**
 * Header position and bg
 */
function header_bg_class() {
  return "sticky-top bg-warning border-bottom border-2 border-danger";
}
add_filter('bootscore/class/header', 'header_bg_class', 10, 2);

/**
 * Change header buttons
 */
function header_button_class() {
  return "btn btn-success rounded-0";
}
add_filter('bootscore/class/header/button', 'header_button_class', 10, 2);

/**
 * Header navbar breakpoint always collapsed
 */
function header_navbar_breakpoint_class() {
  return "";
}
add_filter('bootscore/class/header/navbar/breakpoint', 'header_navbar_breakpoint_class', 10, 2);

/*
 * Header navbar toggler breakpoint always visible
 */
function header_navbar_toggler_breakpoint_class() {
  return "";
}
add_filter('bootscore/class/header/navbar/toggler/breakpoint', 'header_navbar_toggler_breakpoint_class', 10, 2);

Filters can be used to disable certain scripts, such as Font Awesome or the AJAX cart as well. Take a look to more examples in the documentation.

_bootscore-utilities.scss

The main.scss file has been refactored to import Bootstrap source in parts. This not only allows to deactivate individual Bootstrap components if they are not needed, it also allows adding a new _bootscore-utilities.scss file direct after @import "bootstrap/utilities"; where custom utilities can be created using the Bootstrap Utility API.

$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))),
  ));

Output:

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
...

Offcanvas Cart

The offcanvas cart has undergone a significant update. In addition to minor design improvements, cart items now feature an excerpt and AJAX-loaded quantity buttons, enabling customers to adjust product quantity without needing to reload the page. If a product is sold individually or only one item is left in stock, the quantity buttons are disabled, and a badge bg-danger is displayed, providing information on why increasing the quantity is not possible. Try it yourself:

bs Dark Mode

15,00 € Inc. 19% VAT

Add to cart

bs Isotope

Rated 5.00 out of 5

25,00 € Inc. 19% VAT

Add to cart

The offcanvas cart has now evolved into a fully-fledged shopping cart. Its only limitation is the inability to calculate shipping costs, which are also calculated at checkout. The question remains whether the cart page is still necessary or can be skipped. We will recheck this in v6-stable.

Block Widgets

While v5 roughly disabled Gutenberg widgets and enabled classic widgets with a filter, v6 now utilizes Gutenberg and supports the most common widget types, such as search, categories, archives, latest posts, and more.

The card in the sidebar widget position have been removed to enhance the integration of Gutenberg widgets. However, card can now be easily added using group blocks as you can see here in the sidebar. Refer to the documentation for a list of supported blocks and examples on how to restore the card.

New Top Bar widget position

The navbar has been refactored from fixed-top to sticky-top enabling the addition of a new Top Bar widget position above the navbar. This widget area is very useful to drop an eye-catching message to visitors such as coupons or other important informations. Note that this widget area has no classes or styling. Use plain HTML to create your content:

<div class="alert alert-info border-0 rounded-0 py-1 mb-0 small">
  <div class="container text-center">
    Top Bar Widget, use plain HTML. <a href="https://bootscore.me/documentation/widget-menu-positions/">Learn more</a>
  </div>
</div>

Scroll to top to see it in action.

New Logo

Finally we say goodbye to our logo:

This lovely Skype-styled logo has served us well over the past years, but times are changing, and we now need something that better suits the project.

Bootscore is a combination of Bootstrap and the Underscores theme boilerplate, from which the theme is made. Breaking these two words down to the root results in something very very simple, like b_, which represents both boot and underscore. Placing the _ below a capitalized B and using it as the sole for the boot further simplifies the icon, communicating two things in one using the golden ratio:

Wrapping the icon in a square allows for both bold and outline variants. Of course, the theme now features native support for logos in dark-mode:

T-Shirts

Because this new logo is cool, we have looked for a global print-on-demand dropshipping service and found Gelato, which boasts a network of printing companies spread across the planet. Every product is printed and shipped based on the shipping address either in the same country or the neighboring one. Feel free to test the new quantity buttons in the offcanvas cart with this variable product type:

T-Shirt .btn

25,00 € Inc. 19% VAT

S, M, L, XL, 2XL, 3XL

Select options

T-Shirt .btn-outline

25,00 € Inc. 19% VAT

S, M, L, XL, 2XL, 3XL

Select options

T-Shirt .dm-switch

25,00 € Inc. 19% VAT

S, M, L, XL, 2XL, 3XL

Select options

New Contributors

• Thanks to Anisur Rahman for your effort making the cart quantity buttons possible.
• Thanks to Murilo Carvalho for fixing the cart double AJAX request.

Have a great day and support us!