Webpixels Css Versions Save

• Now you can customize color and spacing utilities through maps
• Reduce the compiled CSS size by removing unused utilities

Example

// Functions
 @import "core/functions";
 @import "core/variables";

 // Spacing
 $spacer-values: (
   0: 0,
   1: $spacer * 0.25,
   2: $spacer * 0.5,
   3: $spacer * 0.75,
   4: $spacer,
   5: $spacer * 1.25,
   6: $spacer * 1.5,
   7: $spacer * 1.75,
   8: $spacer * 2,
   10: $spacer * 2.5,
   12: $spacer * 3,
   14: $spacer * 3.5,
   16: $spacer * 4,
   18: $spacer * 4.5,
   20: $spacer * 5,
   24: $spacer * 6,
   px: 1px
 );

 // Utility maps
 $utilities-colors: $theme-colors-rgb;

 // Components
 @import "base";
 @import "forms";
 @import "components";

 // Utilities
 @import "utilities";

 // Remove transform utilities
 $utilities: map-remove($utilities,
   "transform",
   "transform-origin",
   "scale",
   "scale-x",
   "scale-y",
   "rotate",
   "negative-rotate",
   "rotate-y",
   "negative-rotate-y",
   "rotate-x",
   "negative-rotate-x",
   "perspective",
   "translate-y",
   "negative-translate-y",
   "translate-x",
   "negative-translate-x",
   "skew-y",
   "negative-skew-y",
   "skew-x",
   "negative-skew-x",
   "blur"
 );

 // Bootstrap API
 @import "bootstrap/scss/utilities/api";

This update comes with some improvements to handle the removal of utility classes from your Sass file. To do that use the map-remove function, provided in Bootstrap 5.

$utilities: map-remove($utilities,
  "transform",
 "rotate"
);

Add any other key available in our utility list to the map-remove object.

Highlights

• Upgraded Bootstrap to v5.2.2
• Upgraded Popper to v2.11.6
• New utilities, CSS variables, and optimizations

Changes

• The compiled css (index.scss) is now composed of 2 files for performance reasons. When a variables is changed, only the necessary files will be re-compiled:
  • main.scss (includes base, component, and form styles)
  • utility.scss (includes all the utility classes)
• Borders are now using CSS variables (border-bottom-2 becomes border-bottom border-2)
• New .form-check-linethrough variant
• Fixed: table-spaced components shadows issue
• Improved: gradients now make use of CSS variables entirely
• • Deprecated: border-card, border-base
• Deprecated: _modal-vertical.scss (replaced with offcanvas)
• Deprecated: .navbar-search (replaced with utilities)
• Deprecated: bg-tint, bg-shade, bg-soft (replaced with utilities, for ex. bg-primary bg-opacity-50)

• Added .form-item-checkable
• Added .list-group-borderless
• Minor bug fixes

• Added soft shadows for all the available variables (e.g: shadow-soft-5, from 1 to 6)

• Removed btn-soft-* classes
• Added hove focus states to bg/text-opacity modifiers
• Minor bug fixes

• Fixed the .dropdown-animate transition on hide
• Added responsive behavior for .dropdown-animate (e.g: dropdown-md-animate)

• Removed the local var for some of the utility classes

Utilities

• Added background-clip utilities (e.g: bg-clip-text)
• Added transparent value for color utilities (e.g: text-transparent)

Components

• Added new size options for vertical navbars: navbar-lg, navbar-xl
• Added new form-color for selecting color options visually
• Added new table-list class for mobile
• thead-light and thead-dark are deprecated. Use table-dark or table-light instead

Utilities

• Simplified utilities structure
• Added new utility classes for limiting the text displayed in a box: line-clamp-{ROWS}, where rows is 1, 2, or 3
• Added responsive state to all transform utilities
• Added new text-opacity classes (from 10 to 100, e.g: text-opacity-50)
• Added new bg-opacity classes (from 10 to 100, e.g: text-opacity-50)

Other

• Minor bug fixes