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-colorhelpers. Instead of setting individual
.bg-*utilities, developers can now use the
.text-bg-*helpers to set a background color with contrasting foreground color.
- The expansion of
font-weightutilities to include
.fw-semiboldfor 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.scssthat pulls out several Sass maps from
_variables.scssto 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
$enable-container-classesoption is featured. When opting into the experimental CSS Grid layout,
.container-*classes still will be compiled unless the option is set to
Copyright © 2022 IDG Communications, Inc.