Skip to content

v2.0.0-beta.1
Compare
Choose a tag to compare
@extrabright extrabright released this 02 Oct 10:14
· 24 commits to master since this release
v2.0-beta.1
1d2515c
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

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
Assets 2
Loading