• FIX: .bg-accent issue was fixed
• NEW: added new .img-dark and .img-light classes to toggle on light/dark mode

Changelog

• FIX: navigation hover background issue on dark mode
• FIX: dropdown menu hover issue on dark menu
• NEW: added .scrollbar utility class for hiding/customizing scrollbar behaviour

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

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

• 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

• 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