Introduction

There are many CSS frameworks out there that helps us create beautiful web UI. But because HTML and CSS is evolving at an increasing rates, some of the framework is getting obsolete and outdated.

In this post, I am going to list out some of the most popular CSS Framework that have been integrated with HTML5 and CSS3 latest features such as Flexbox and several units measurement such as Rem. The list below are my personal preference and I highly recommend that you check them out and compare each of the framework on your own to see the full features and functionality it has provide.

Bootstrap V4

Bootstrap Homepage
Bootstrap Homepage

Bootstrap is still the king of CSS Framework, with the new version 4 that’s going to be released soon (currently it’s still in alpha version during the time of writing this post), It will continue to dominate the CSS Framework league.

The new version 4 is a full rewrite of version 3 and it’s using Flexbox out of the box. This includes all the components such as Carousel and Navbar. In addition to that, Bootstrap 4 is using SCSS instead of LESS due to its popularity and popular vote by most of the users.

To read more about Bootstrap, you can check out their Documentation as well as their Blog that will bring all the latest and greatest news from the core team.

Bulma

Bulma Homepage
Bulma Homepage

Bulma is a modern CSS framework based on Flexbox that’s rising fast and pretty much loved by most developers. This CSS framework is slightly new, but I love how simple and slim this framework is. Internally, it’s using SASS and the code is very modular.

It doesn’t come with built in JavaScript like how Bootstrap does and this is because the creator made it to be “environment agnostic” framework.

“There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered “environment agnostic”: it’s just the style layer on top of the logic” — Bulma

It relies heavily on Flexbox for the overall styling and components that it’s using. The documentation is very friendly and there’s a lot of examples to show how things are done, so check them out and you will love it.

Tailwind CSS

Tailwind CSS Homepage
Tailwind CSS Homepage

Tailwind CSS is A Utility-First CSS Framework for Rapid UI Development that was developed by Adam Wathan et. al that allows us for rapidly build a custom user interface.

With Tailwind CSS you are almost no longer required to write css anymore as they have provide the css for us and we can focus on styling the user interface. With this CSS library, we will be able to build component based template that will allow us to easily re-use it across the pages on our website.

There’s also a Tailwind CSS cheatsheet and I have included the home page to the website below as a reference.

Tailwind CSS cheatsheet
Tailwind CSS cheatsheet

Milligram

Milligram Homepage
Milligram Homepage

For this fourth framework, it’s called Milligram and it’s dead minimalist. I usually use this framework for any small project that requires drop in style on the go. The grid system is using Flexbox out of the box and SASS for the underlying codes. I recommend that you go check it out and try it when you are developing small project or just playing around with it.

In Conclusion

Although these frameworks comes with the latest and greatest addition that HTML5 and CSS3 has provide, make sure to put your user / visitor into consideration. Because some of these features are only available for the latest version of the browsers and you might want to find a way for fallback such as Autoprefixer or Modernizr.

You can also visit Can I Use, to check if the latest HTML5 and CSS3 features is available for the targeted browsers of your website.