Bootstrap 5.2.0 enhances CSS and custom components

With the latest planned upgrade to the Bootstrap web development framework, the builder now provides CSS variables for all components along with new helpers and utilities.

Bootstrap v5.2.0-beta1, released on May 13th, has been called the framework’s biggest release since Bootstrap 5.0 two years ago. Components now include easy themes and CSS variables that enable real-time customization. Support for color modes starting with dark mode will be added soon. The Components page has been updated to include a reference guide for related CSS variables. The values ​​of most CSS variables are assigned via Sass variables. Both CSS and Sass customization are supported.

An investment was made in helpers and utilities in version 5.2.0 to make it easier to modify custom components. Here are two examples:

• Add New .text-bg-{color} helper.rather than setting them individually .text-* When .bg-* Utilities, now available for developers .text-bg-* Helper to set the background color with a contrasting foreground color.
• development of font-weight utilities to include .fw-semibold For semi-bold fonts.

Further improvements in this vein are expected as the development of version 5 progresses. 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 introduced _maps.scss Pull some Sass maps from _variables.scss Fixed an issue where updates to the original map were not applied to the secondary map that extended it.
• Added responsive variations to the Offcanvas component.
• Documentation has been redesigned.
• Buttons and inputs have been refined and updated border-radius value.
• a $enable-container-classes Options are posted. If you choose the experimental CSS grid layout, .container-* The class will still compile unless the option is set to false.