When used effectively, CSS libraries and frameworks — to an extent — make writing CSS easier. They often handle the grunt work of building polyfills to give out-of-the-box cross-browser functionality, provide predefined classes for a wide range of common styling needs, and provide responsiveness out of the box.
Based on my own experience as a frontend developer, I’ll be sharing a couple of CSS libraries/frameworks that I’ve used, what was so great about them, and what wasn’t.
1. Bootstrap
Bootstrap is one of the most popular CSS frameworks out there. The Twitter team created this in 2011 and has since then become this popular, massive project.
Bootstrap provides some commonly used components like navigation, forms, cards, buttons, badges, etc., that you can plug into your project and save some time. They pioneered the 12 grid system that makes developing a responsive site very easy. It has great documentation and a broad community.
One drawback with Bootstrap is that every website created through it looks similar to each other. You will have to constantly override some styles, which can quickly become redundant.
2. Tailwind
Tailwind CSS is a utility-first library. Utility-first means that it features different helper classes (utilities) — like .padding-4 or .text-bold — that can be mixed to style a component by applying them to an HTML element. Their mantra is that they help you “rapidly build modern websites without ever leaving your HTML”.
I personally like Tailwind CSS because you don’t have to write so much CSS or override styles. After all, utility classes for the majority of style needs exist. Also, pages created with Tailwind CSS have this minimalistic, sleek, and clear design.
However, my only drawback with Tailwind CSS is the need for numerous inline classes to create a decent design, which can quickly cause HTML files to bloat up. It goes against the best practice of separation of concerns between structure styles.
3. Materialize CSS
Material CSS was created by Google in 2014 based on its material design principles. Just like Bootstrap, Materialize CSS utilizes a grid system based on 12 columns with similar class names and overall structure.
It has a built-in easy-to-use feature like flow texts, parallaxes, hoverable items, and all its components feature neat and smooth animations and transitions. Materialize CSS is a very excellent choice for building mobile screens.
My only downside of materialize CSS is that it is opinionated about how your elements should look and behave. Also, it doesn’t have a very active community like Bootstrap and Tailwind.
Blog Credits: Linda Ikechukwu
Comments are closed.