DEV Community

Discussion on: Meet Webpixels 2.0

Collapse
 
extrabright profile image
Alexis • Edited

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
  • Webpixels Componets
  • Webpixels Templates
  • Webpixels Integrations (coming soon)

@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.

Collapse
 
robertandrews profile image
Robert Andrews • Edited

1.

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.

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 only avatars, 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!

Thread Thread
 
extrabright profile image
Alexis • Edited
  1. Now I understand what you meant. Well, that could be tricky, but I think this is something we'll address in the near future. My goal for now is to provide and promote simplicity throughout the development process. Switching from one framework to another was never easy, but maybe we'll come up with a nice solution to fix that.

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 🙏