Utility and component-centric design system leveraging Bootstrap 5 for rapid, responsive UI development.
MIT License
Bot releases are visible (Hide)
We launched a beta version for our new Webpixels v2.0 Documentation
.article
typographyPublished by extrabright about 1 year ago
Published by extrabright about 1 year ago
Published by extrabright about 1 year ago
Published by extrabright about 1 year ago
Published by extrabright about 1 year ago
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.
$avatar-width
to $avatar-size
$btn-square-width
to $btn-square-size
btn-app
componentform-color
checks for choosing color options.dropdown-item
has a new style.dropdown-body
as an alternative to dropdown-item
(useful when you don't need a clickable item)$dropdown-helper-color
Sass variablebg-soft-*
colors in favor of the new Bootstrap subtle color options
bg-surface-*
colors in favor of the new Bootstrap body color options
$tertiary
color option has been removed.overlap-*
utitlies were replace with the new Bootstrap .z-*
classes.min-height
utilities.h-*
to .h-rem-*
.overlap
class for addin z-index on elements has been removed in favor of the newly add .z-*
class from Bootstrap.font-*
utilities in favor of the default Bootstrap .fw-*
and .fst-*
classes.max-w-*
became .mw-*
.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%.top-2
to .top-0 mt-2
.overlap-10
to .z-1
.translate-x-1/2
became .translate-y-50
.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
Published by extrabright over 1 year ago
.accordion-button
when .accordion-flush
is in use.accordion-body
when .accordion-flush
is in use.article
typography elementPublished by extrabright almost 2 years ago
Published by extrabright almost 2 years ago
Published by extrabright almost 2 years ago
scroll
and scroll-snap
utility classesoffset-left-*
for screen width (e.g: offset-left-screen-lg)Published by extrabright almost 2 years ago
// 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";
Published by extrabright almost 2 years ago
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.
Published by extrabright about 2 years ago
border-bottom-2
becomes border-bottom border-2
).form-check-linethrough
varianttable-spaced
components shadows issueborder-card
, border-base
_modal-vertical.scss
(replaced with offcanvas).navbar-search
(replaced with utilities)bg-tint
, bg-shade
, bg-soft
(replaced with utilities, for ex. bg-primary bg-opacity-50
)Published by extrabright over 2 years ago
Published by extrabright almost 3 years ago
Published by extrabright almost 3 years ago
btn-soft-*
classesPublished by webpixels almost 3 years ago
.dropdown-animate
transition on hide.dropdown-animate
(e.g: dropdown-md-animate)Published by extrabright almost 3 years ago
Published by extrabright almost 3 years ago
background-clip
utilities (e.g: bg-clip-text)transparent
value for color
utilities (e.g: text-transparent)Published by extrabright almost 3 years ago
Components
Utilities
Other