Make your own CSS Component Library

Hello Everyone!

I am going to share how I made my own CSS library and how you can make yours as well. So, let's first understand what's a CSS library and what does it comprise.

What is a CSS library?

A CSS library is used when you’re looking to furnish a house. Sometimes, you don’t feel like building everything from scratch. With CSS libraries, you’re more in control. You can choose when to call the library as well as how it’s used. CSS libraries are much more flexible than frameworks.

What are the basic components included in a CSS library?

There are many components included in a CSS library, but the most used ones are as follows:

You can find a detailed list of all CSS components here

How I made my own CSS component library?

My motive behind creating my own CSS library was to avoid writing CSS from scratch while developing new projects and reuse these components across different projects.

First, I searched for a particular component and took inspiration from the CSS libraries like Bootstrap, Semantic UI. I understood how these libraries implement a particular component and try to replicate the same in my CSS library. Gradually, I started to enjoy CSS & implemented many of the above components. Also, side-by-side I created a documentation website for anyone who wants to use this library.

You can view it here

How you can make your own CSS component library?

I used to fear writing CSS but after making this library I feel more comfortable while writing CSS. You can also make your own CSS library by following the above steps. Don't think to do all components at once, take your time and complete easier components first and then go for the next one. Once, you have completed most of the components, you can create a documentation website to showcase your library.

Creating your own CSS library will save you a lot of time writing plain CSS and you can ship more features in less time.

You can check out the source code of my CSS library on GitHub

Takeaways:

Making your own CSS component library will reduce the pain of writing CSS from scratch
Making small components using CSS is a good way to learn & practice it.
On completion of your library, you can reuse it across your web apps which will abstract much of CSS while developing your apps.

Thank you guys for reading up till here, I hope you enjoyed and learnt something new! You can connect with me on Twitter, LinkedIn & GitHub.

Happy Coding!

References: Chakra UI Bootstrap Semantic UI