In this post I’ll go over CSS frameworks that I consider the best for different purposes. We’ll cover feature rich frameworks like bootstrap, but also look into some of the smaller and more light weight contenders.
What’s the best CSS framework is hard to answer, but what the best framework for you is, is a 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.
Bulma is another framework written in SASS that makes use of the flexbox feature for grids and centering elements. The radiant colours of the default color scheme might be a little off putting, but luckily these are easily changed.
One of the cool features of this framework is the use of tiles that allow you to easily create metro like and well aligned interfaces in the browser.
Again it’s not as fully featured as Foundation or Bootstrap, but well worth a look.
The grid in Cutestrap is basically spreading out columns equally in a grid row unless classes like
.column--heavy are provided. These either half or double the size of a column.
This doesn’t give you the most fine grained control over your content placement, but it’s certainly easy to get started with, if you don’t have the most complex visual ideas for your content.
Mui CSS (Material Design Framework)
MUI CSS is worth a look, especially if you’re going to pursue material design in your application. The Material Design Guide set by Google has become increasingly popular both in the look of user interface elements, as also for transitions and animation easings.
The MUI CSS framework targets a lot of these aspects and implements many aspects of the material design guide quite well. The perception of depth your user will perceive while using elements in different layers or interacting with buttons works pretty well. Currently there is a lot on the roadmap for MUI, but it seems like what already is implemented, works pretty well.
Syntactically MUI is very similar to bootstrap, it just has the
mui- prefix on all the class names. That doesn’t mean it’s just a bootstrap theme, but I think they picked up a lot of inspiration from there.
Wing CSS framework
Wing CSS is another super light weight framework, similar to Cutestrap. It has a very basic grid, that basically spreads out elements evenly on a row, but some nice to have utility classes.
Grd (grid only framework)
Not as a framework, but as only a grid system GRD made it on my list, because it’s different from the usual container models and relies on row naming that reminds a lot of previous CSS grids:
<div class="Grid"> <div class="Cell -3of12">3of12</div> <div class="Cell -9of12">9of12</div> </div>
calc browsers below IE11 are not supported.
Different frameworks for different projects, all of them are available on github or directly through
npm, which is super cool!
Did I miss any CSS frameworks that you tend to throw at your projects?
Have you tried any of the above?
Please let me know in the comments!