Build your app 10x faster with Webpixels CSS and Bootstrap

Webpixels CSS is a relatively new project based on Bootstrap 5. I started this because I needed to improve the way I build web apps. The most time-consuming tasks are usually the ones related to the project setup: creating a new project, setting up the structure, integrating the styles and scripts, including some custom-made code boilerplates, and so on.

After hundreds of projects, I was able to spot the things that repeat in most projects and I included them in one repo that could be installed and re-used everywhere I need.

So, what is it?

Basically, Webpixels CSS is an extension to the base version of Bootstrap. It incorporates the default components and adds new ones on top of them, without messing with too much custom code. This allows me to update to a new version faster.

What's interesting about the way I build components is that I try as much as possible to avoid writing custom CSS. The way I do it: utility classes

Utility classes are not new. Bootstrap introduced them years ago. The concept was brought even further by projects like Tailwind CSS, Windi CSS, and the recently launched Uno CSS.

However, what I like about Bootstrap is the balance between these two concepts: components and utilities.

Finding the right balance

Components are great because they help us encapsulate some code, for a certain situation, and reuse it when we need it, for example, buttons, cards, avatars, and so on. Using Sass variables, you can customize the default look and feel of these and adapt them to your brand's identity.

But, what happens when you need more? Like changing some properties in a particular situation. Back in the day, it would require creating a custom CSS modifier class to add those styles.

Let's say you have a button with the .btn class:

.btn {
   background-color: red;
   border: 1px solid dark;
   padding: 1rem 2rem;
}

And you want to add some additional properties, like margin for example. Instead of creating a new class for it:

.btn-modifier {
   margin: 2rem;
}

Now, we have another way to do that. Using utility classes you can do the same thing right into your HTML. No more custom classes. It's cleaner, and faster, and it will help a lot in terms of performance and file size.

<a href="#" class="btn m-4">Button</a>

I find this a beautiful and elegant approach. And with the next versions of Bootstrap, I am pretty sure the team will come up with some pretty cool stuff.

How it works

With Webpixels CSS I took these two concepts and extended them to cover 80% of the use cases. I added some new components that are not existing yet in Bootstrap, and I create a comprehensive list of utility classes using the included API. You can see them all documented in our documentation.

With these two put in place I started creating a components library. The design code is: simplicity. I try to stick to it as much as possible.

Right now there are approximately 500 components and 40+ templates. I am working on new items every week. Hopefully, I will get enough support and customers to keep me going, but so far, the feedback has been great.

With a single npm install you get access to all of these, no extra steps required. Start copying the snippets you need and that's it. More time to focus on functionality, while keeping things pretty.

Final thoughts

I always wanted to write this, but never found the time. That code ain't gonna write itself 😂

Also, I updated @webpixels/css to the latest Bootstrap version. No significant changes happened, so the migration should go very smoothly. You need to update your package.json file with the new available versions.

If you want to support our work, give it a ⭐ on GitHub.

🙏