Your new CSS toolkit for building design systems is here

[extrabright]

Being in the web development world for quite some time, I always found myself in a place where I had to reuse and rebuild the same stuff over and over again. My objective always has been to create a minimal CSS framework that I could use in all my future projects. This is why I came up with a new CSS toolkit based on Bootstrap 5, a balanced framework that includes ready-made components + a comprehensive list of utility classes ready to be used directly into your HTML.

And now, why Bootstrap?

I started to play with this new utility API Bootstrap now has in its latest version. I've been using Bootstrap for the last few years, and I don't want to drop it until I am sure there is a much better alternative.

I must say, I really enjoyed it, and I managed to create a pretty long list of utility classes that could help me write less CSS and make quick changes directly in the HTML. In my opinion, finding the balance between pre-defined components and utility classes is the way to go on long-term.

This is why I started this side-project called, Webpixels CSS. Initially, I made it to help me have a strong foundation for all my websites, but I realized this could help a lot more people who want to implement a nice adaptive design system into their projects.

It includes a comprehensive style guide, new components (besides the ones in Bootstrap), and an entire set of utility classes to extend the default look and feel.

In short, it behaves like a design system. Webpixels CSS is 100% compatible with the latest version of Bootstrap (currently v5), so if you are familiar with it, but you demand something more than it provides, then you should give this tool a try.

• GitHub Repo
• Documentation