This article will cover which CSS frameworks are best for different situations. We’ll cover feature-rich frameworks like bootstrap, but also look into some of the smaller and more lightweight contenders.
What’s the best CSS framework is hard to answer, but what the best framework for you is, is an easier to answer when you know more than one. I work with Frontend or CSS every second day, so I have tried out all of the below.
I’ll compare them by features, which language they’re written in under the hood and how easy it is to just take the parts that you need.
Frameworks in this article:
- Twitter Bootstrap 4
- Zurb Foundation 6
- MUI CSS
- Wing CSS
(Twitter) Bootstrap 4
I think there is nothing wrong with calling Twitter Bootstrap the most popular CSS framework so far. It provides sane defaults for everybody who doesn’t want to spend a lot of time on their frontend, but also lays down a solid foundation for the ones who want to take their frontend experience beyond that.
On top of that it’s quite easy to customise and with a bit of effort you can significantly decrease the first page load size by only including the SCSS files you actually want, see: Bootstrap 4 Grid only and SASS with Gulp.
Foundation 6 (Zurb)
Another feature rich contender is Zurb Foundation for sites. The other option available is a framework with similar naming conventions for emails, which is handy if your work involves both.
Foundation shares a lot of similarities with Bootstrap, it has a grid system that optionally can be used with the flexbox display rules. The visual style is very flat and reminds one a little of the Windows Metro/Tiles interfaces. If you want to have closer look at what’s included have a look at the Zurb Kitchensink.