Highlights

We launched a beta version for our new Webpixels v2.0 Documentation

Changes

• improvements for the .article typography
• fixed border color options (border-purple-500) using border-opacity (border-opacity-50)
• fixed background color options (bg-purple-500) using bg-opacity (bg-opacity-50)
• changes the default shadow utilities (shadow-sm becomes shadow-1)
• removed border radiuse utilities after xxl (border-radius-3xl to border-radius-8xl) to stick with the bootstrap ones

• improved CSS custom properties for colors and grays
• added CLI scripts to generate themes (test mode)
• minor bug fixes

• removed bg-soft-{color} utilities and using the newly added ones in Bootstrap (bg-{color}-subtle)
• added utility classes for all gray colors (bg-gray-100)
• color optimizations
• bug fixes

Utilities

• added new color options (e.g. border-purple-200, border-purple-500)
• border style utilities using css variables, instead of css property (e.g: border-dashed adds the --x-border-style: dashed)
• fixed dropdown-menu issue on dark mode
• minor fixes

• added utilities for all color shades (e.g. bg-purple-100 ... bg-purple-900)
• minor fixes

Webpixels CSS v2.0, comes with some major changes and improvements. We will drop some of the custom components in favor of utility classes and added support for the custom properties (CSS variables) introduced in the latest Bootstrap update.

Highlights

• Modified and simplified the project's architecture

Avatars

• UPDATE: modified Sass variable from $avatar-width to $avatar-size

Buttons

• UPDATE: modified variable from $btn-square-width to $btn-square-size
• DEPRECATED: removed btn-app component

List Groups

• NEW: added a new checkable list group option

Forms

• NEW: form-color checks for choosing color options

Dropdowns

• UPDATE: .dropdown-item has a new style
• NEW: added .dropdown-body as an alternative to dropdown-item (useful when you don't need a clickable item)
• DEPRECATED: removed the $dropdown-helper-color Sass variable

Variables

• DEPRECATED: removed the social media colors (facebook, instagram, etc.)
• DEPRECATED: removed the bg-soft-* colors in favor of the new Bootstrap subtle color options
• DEPRECATED: removed the bg-surface-* colors in favor of the new Bootstrap body color options
• DEPRECATED: $tertiary color option has been removed

Utilities

• the .overlap-* utitlies were replace with the new Bootstrap .z-* classes
• removed the .min-height utilities
• height utilities class changed from .h-* to .h-rem-*
• position values were changed to match the default ones one Bootstrap
• opacity values have been reduced and now matching the default ones in Bootstrap
• the .overlap class for addin z-index on elements has been removed in favor of the newly add .z-* class from Bootstrap
• removed the .font-* utilities in favor of the default Bootstrap .fw-* and .fst-* classes
• .max-w-* became .mw-*

Migration Guide

Widths

• .w-1/4 -> .w-25`,
• .w-1/2 -> .w-50: 50%,
• .w-1/2 -> .w-75: 75%,
• .w-100 -> .w-100: 100%,
• .w-110 -> .w-110: 110%,
• .w-120 -> .w-120: 120%,
• .w-130 -> .w-130: 130%

Spacings (margin and pagging)

• Replace position values like .top-2 to .top-0 mt-2

Z-index

• Replace overlap classes: .overlap-10 to .z-1

Transform

• .translate-x-1/2 became .translate-y-50
• skew utilities are now optional

Line Heights

• .lh-none -> .lh-1
• .lh-tighter -> .lh-xxs
• .lh-tight -> .lh-xs
• .lh-snug -> .lh-sm
• .lh-normal -> .lh-base
• .lh-relaxed -> .lh-lg
• .lh-loose -> .lh-xl

What's Changed

• removed horizontal padding for the .accordion-button when .accordion-flush is in use
• removed horizontal padding for the .accordion-body when .accordion-flush is in use
• lightened the body color (from gray-700 to gray-600)
• some improvements for the .article typography element

Changelog

• Added sizing variables
• Added transparent options for gradients
• Minor fixes

• Extracted colors in a separate module
• Added responsive border widths
• Minor bug fixes

Improvements

• Added new CSS variables for customizing navbar links
• Minor bug fixes

New utilities

• Added scroll and scroll-snap utility classes
• Added a new offset-left-* for screen width (e.g: offset-left-screen-lg)

• 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