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)