Best CSS Frameworks of 2017 (+SASS)

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
  • Bulma
  • Cutestrap
  • MUI CSS
  • Wing CSS
  • Grd





(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.

Source Language:      SASS / SCSS
Minified Size CSS:    112kb
Minified Size JS:     52kb
JavaScript:           yes

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.

Source Language:      SASS / SCSS
Minified Size CSS:    60kb
Minified Size JS:     84kb
JavaScript:           yes

Bulma


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.

Source Language:      SASS / SCSS
Minified Size CSS:    13.6kb
JavaScript:           no

Cutestrap

Cutestrap is a truly minimalistic framework, it focuses on fewer elements and does not have many custom components. On the upside, no JavaScript includes are necessary.

The grid in Cutestrap is basically spreading out columns equally in a grid row unless classes like .column--light or .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.

Source Language:      SASS / SCSS
Minified Size CSS:    8kb
JavaScript:           no

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.

On top of the design implementation, the team also aims to support JavaScript frameworks like Angular or React with an integration that’s close to the framework.

Source Language:      SASS / SCSS
Minified Size CSS:    48kb
Minified Size JS:     28kb
JavaScript:           no

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.

Source Language:      CSS
Minified Size CSS:    12kb
JavaScript:           no

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>

Using flexbox and calc browsers below IE11 are not supported.

Source Language:      CSS
Minified Size CSS:    0.5kb
JavaScript:           no

Conclusion

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!

4 thoughts on “Best CSS Frameworks of 2017 (+SASS)”

  1. Hi Jonathan,
    I have a CSS framework that’s quite different than most, with a great deal more power and flexibility. It’s aimed towards design and creativity rather than a just a starting point.

Leave a Reply

Your email address will not be published. Required fields are marked *