Bootstrap 5.2.0 bolsters CSS, custom components

With the latest planned upgrade to the Bootstrap web development framework, builders are offering CSS variables for all components, along with new helpers and utilities.

Bootstrap v5.2.0-beta1, published May 13, is being called the biggest release of the framework since Bootstrap 5.0 two years ago. Components now include easier theming and CSS variables to enable real-time customization. Color-mode support, beginning with dark mode, will be added soon. Component pages have been updated to include a reference guide of relevant CSS variables. Values for most CSS variables are assigned via Sass variables; customization via CSS and Sass are both supported.

To make it easier to modify custom components, investments have been made in Version 5.2.0 in helpers and utilities. Two examples include:

• The addition of new .text-bg-{color} helpers. Instead of setting individual .text-* and .bg-* utilities, developers can now use the .text-bg-* helpers to set a background color with contrasting foreground color.
• The expansion of font-weight utilities to include .fw-semibold for semibold fonts.

More improvements in this vein are expected as Version 5 development continues. Bootstrap v5.2.0-beta1 can be downloaded from the project website. Elsewhere in Bootstrap v.5.2.0-beta1:

• A new Sass file is being introduced with _maps.scss that pulls out several Sass maps from _variables.scss to fix an issue where updates to an original map were not applied to secondary maps that extend it.
• The Offcanvas component now has responsive variations.
• Documentation has been redesigned.
• Buttons and inputs have been refreshed with refined border-radius values.
• A $enable-container-classes option is featured. When opting into the experimental CSS Grid layout, .container-* classes still will be compiled unless the option is set to false.