Using a CSS (or any kind) framework is usually something essential. A predefined system or toolkit can help you save a lot of work in the short and long run.
In 2023 there are a lot of CSS frameworks to choose from, but the quality differs. There are the big names and the smaller ones. Being a smaller entity makes competing with the more prominent players hard, but still, the variation is considerable. And still, the system we choose must have the proper amount of support in the long term.
Why Do We Need a CSS Framework?
Today, with modern CSS, we can solve many things without any external toolkit, which is good. With CSS grid, we can switch the classical 12-column grid systems.
In the long term, we need boundaries, a system that we can utilize adequately, and something with good documentation because we forget fast. It is essential that we can use something easily after years. Using a framework can help with this too.
There are many different types of frameworks, so we can choose one that suits us well.
Bootstrap 5
Bootstrap is the oldest and one of the most significant participants on this list. It is still the most starred repository on GitHub, and for a reason.
With its early start and popularity, it has considerable advantages. It supports Sass, so you can choose what you need from it. If you need a proper grid system, import just that, and don’t bother with the styling.
You will get a lot of high-quality components with good accessibility and JS. It has a vast ecosystem; if you need a theme for any specific segment, you will find one.
The current version is 5.3; over time, it got comprehensive rewrites, so it is as modern today as any time.
It is easy to start with but has a steep learning curve if you want to master it.
Tailwind CSS
Tailwind CSS is a utility-first framework. It operates with thousands of small classes that only do one thing. Combining them, you can build anything.
It is a different solution than the component-based systems (like Bootstrap), but it is also a high-quality and robust system. In the age of the JS frameworks, it is easy to see the usefulness of this tool.
Now it is the most downloaded CSS framework with an extensive ecosystem and good documentation.
It uses PurgeCSS by default to reduce the generated CSS file size. It is a necessary step because of the huge amount of classes (and the vast original size), but it is always nice to run a purge.
It uses PostCSS and has a custom config file tailwind.config.js.
UIkit
UIkit is also a major CSS framework solution. It is component-based with a bunch of components and utilities.
It also gives you complete solutions like the notification component, where you get a JS API too.
It is well-supported and well-documented. You can use it with Sass to fully control the generated CSS.
CodyFrame CSS
CodyFrame is built by CodeHouse. If you have been developing UI for some time, I am sure you have met them. They write excellent blog posts about various challenging front-end problems and solutions.
CodyFrame comes with many custom and high-quality components (although some are behind a paywall, but it will be worth the money) that make it really powerful.
Although it is a component-based library, it reduces the bloat with the copy-pastable components and the modern code.
Spruce CSS Framework
Spruce CSS is a smaller and newer framework. It is also the framework I develop, but I try not to be biased.
Spruce is like any other similar system and tries to solve some bottlenecks when it comes to CSS:
- We need a system for managing spacing, colors, and different settings.
- It helps you write more maintainable code in the long run. For this, the documentation matters more than you expect.
- It helps you stay modern. It doesn’t ship with a classical grid system; it uses Flex and Grid in its components.
- Supports dark mode and RTL out of the box.
- It tries not to overstep its boundaries.
- It is lightweight as any other framework.
It is Sass based, so you can access many variables, mixins, and functions that make your life easier.
