The new Webpixels website is finally live, after 4 months of continuous development and improvements. This update is focused on how the component library works and the overall experience. The goal is to make it much easier to navigate through examples and preview and copy the stuff you need.
Here are some of the new stuff you can try starting today:
Visit the new Webpixels website
New component explorer
Instead of having categories and clicking each one of them, now you’ll be able to see them all in one place and filter out the ones you need. Also, there is a search bar to get the result you want quickly.
Preview components in a new sexy modal
Once you find the component you need, click on it to preview the UI, but also the code. Everything happens now in one place, so we hope it will make the whole experience a much better one, with fewer clicks and time spent to get the things you need out of the library.
Live code editing
Find the component you need, and click on it to preview the UI, but also the code. In the latest version, you will be able to tweak it and see the changes before copying it into your project.
Organize components into collections
Since our components are part of an ever-growing library, collections will allow you to create smaller batches of elements based on the category or the project’s type.
New tab for listing templates
Instead of mixing components and templates in one place, we thought it would be much better to separate them in two separate sections. This way you can work closer to Atomic Principles.
Improved documentation
We still have many things to add to our docs, but we are pretty happy with the result, so far. We'll keep adding more examples and features, now that Bootstrap started its big move with the v5.2 update.
Here are some things you should expect in the near future:
- Component CSS variables
- New helpers and utilities
- Groups of variables for root, components, and utilities
- Improved theming capabilities
- Dark mode support out of the box
We expect to release the next major update for @webpixels/css one month from now.
Thank you 🙏
It’s been one year since we officially launched the new Webpixels website. It is such a great feeling to build something that people find useful and brings value to their projects.
And now we are ready for the next milestone.
Hope you enjoyed it.
Top comments (4)
Looks great, just like your framework components do.
General questions about Webpixels...
1.
The code looks refreshingly faithful to Bootstrap's own native classes, with minimal resorting to messy custom classes or div construction. Is that fair to say?
Eg. From a quick skim, I see custom classes like:
Do you have any statement anywhere on how much of Webpixels is custom vs piggybacking Bootstrap's native classes? It's a consideration in planning any possible future migration between frameworks.
I sometimes wonder whether if there is value in prefixing custom classes with a framework-specific prefix, like "wp-" in your case.
2.
Are you tracking Bootstrap 5.2 and beyond, leading to Bootstrap 6? Curious if they are now doing anything natively that is in Webpixels, anything that would prompt you to make big changes or eliminate code. Eg. With Bootstrap natively adding dark mode, two methods not necessary?
twitter.com/webpxs/status/15320119...
3.
What exactly is the webpixels/css repository on GitHub, as separate from the premium package via your website.
4.
FYI, on page webpixels.io/components/badge you need to use the text "Tertiary" in place of the second "Secondary".
Hi Robert,
Thanks for your feedback and questions. I will try answering them 1 by 1.
1
Yes, this is the main goal. I don't want to come with a custom styling or some other replacements to the default Bootstrap, rather I try to extend it in a simple and scalable way in order to easily build components and templates.
Even though Bootstrap comes with a pretty comprehensive set of components and utilities, from my experience those are not enough. Especially when working with multiple projects.
What I do is I observe the repetitive patterns and when it's the case I create a new component for it, or simply extend it using the utility classes.
As a final thought, Webpixels CSS is not a theme or a set of custom classes, but rather a more structured framework for helping us build the UI stuff we need. So, in my oppinion there is no need for custom prefixes, since we will always keep it in sync with the latest Bootstrap version. There is no desire to switch between frameworks. We'll keep Bootstrap as our foundation.
2
Yes, that is one of the "hard" parts in maintaing Webpixels CSS and Webpixels Components. Our goal is to move in sync with Bootstrap, so I am already working on integrating properly the 5.2 version, followed by v6 in the near future.
If something we have included will be supported natively, we'll remove it from our framework and keep the Bootstrap one. We try to keep in touch with the Bootstrap team and always suggest new features, but because it's such a large community, some of the changes can not be implemented right away.
3
So, basically Webpixels is composed from the following parts:
@webpixels/css is the CSS framework that brings togeteher Bootstrap and our extended components and utilities. We open-sourced it because I think this could help many other developers like me to create a more production-ready website or app.
While the components and templates are the HTML (and soon React) snippets built on top of our CSS framework, which are available on our website for our subscribed users.
4
Thanks for the heads up. I am in the process of a major update for this library, so I will fix this also.
1.
What I meant was... what if I wanted to switch between Bootstrap UI frameworks, ie. From Webpixels to another Bootstrap UI framework. Maybe useful to see that .avatar is not a standard component by calling it .wp-avatar? Or not... maybe Bootstrap introduces .avatar and then you are already ahead of the game and compatible?
I'm just a little intrigued to have a sense of how many, and which, classes are custom builds. From
css/src/components/, it looks like onlyavatars, but maybe that's not the right place to look.3.
Ah, I see... so the repo is the underlying CSS changes, but the Components is the mark-up for things like profile cards etc.
Anyway, it's all a lovely piece of work!
But as I said, we are keeping Webpixels CSS in sync with Bootstrap. And we are versioning our updates accordingly. If Bootstrap adds an avatar component, we'll update our framework and our UI library as well.
Thank you for all your nice words 🙏