Creating consistent, concise, and effective CSS can be quite a lot of work. There are so many things to consider like responsiveness, accessibility, and structure.

Why Have a CSS Framework

Having a solid CSS framework as part for your project is an important foundational addition. While it’s fun to roll your own CSS foundation/framework, it is also a good option having a third-party framework. A third-party CSS framework allows for:

  • Uniformity across teams of developers
  • Documented features
  • New features are added by the package owner or community
  • A set of classes and components

Let’s take a look at some of the top CSS Frameworks you can use to power your webpages.



Let’s kick this off with the CSS Framework used and loved by CSS gurus. One of the benefits of Bulma is that it is *purely CSS, no JavaScript. This means you just need to include one .css file in your project to get going, no .js required.

Here are a few of the other features.

  • Flexbox based
  • Built with Sass so only use what you need
  • Fully responsive and mobilefirst

Watch out for a tutorial on how to use Bulma here!

Flexbox for building a grid-based layout is an incredible improvement on using floats. That said, although Bootstrap is more popular, it took a while for Bootstrap to adopt Flexbox with v. 4.0. This helped Bulma to gain some popularity while Bootstrap 4.0 was in the works.


Bootstrap has consistently been one of the biggest CSS Frameworks there is. It is often de facto framework, especially for Web Developers. After several years of work, in early 2018, the official 4.0 version released! Bootstrap 4.0 was a significant update.

  • new color schemes
  • new utility classes
  • built on flexbox
  • built with SASS vs LESS

I quickly made the jump from version 3.x to 4.x, and I have really enjoyed it. As I mentioned earlier, I’m a big fan of utility classes, so I love the fact that Bootstrap added these. If you’re already using version 3.x, take a look at 4.x. If you’re interested in using Bootstrap for the first time, go ahead and start with 4.x.

Tailwind CSS

Tailwind is a bit different in that it focuses more on utility classes instead of fully-fledged UI components. I, personally, love this concept since it gives you the ability to really build your own look and feel while leveraging classes to do so.

By having a bunch of utility classes, you can compose your markup on the fly:

<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">

While this may look ugly to some, it is nice to have classes ready to go instead of having to create a new class just for this button and styling with a couple CSS properties.

If you’re looking for a framework that gives you a bit more custom look and feel, check out Tailwind!

This is an interesting approach considering that Bootstrap sites, for example, are easy to pick out since they typically look very similar. With Tailwind, it is unlikely that two sites will look that similar!

It’s very easy to customize Tailwind to create things like alert boxes:

Refactoring UI

Fun fact about Tailwind. Two of the creators of Tailwind Adam Watham and Steve Schoger, the masterminds behind Refactoring UI. Refactoring UI is a platform for learning how to take design into your own hands, and it’s incredible! They just released their book/course with some of the best design tips and trick you can find.

Semantic UI

Semantic UI takes a unique approach that focuses on writing “humanfriendly HTML”. In other words, classes are named as closely as possible to how a person would speak. This makes writing HTML intuitive especially for newer developers.

In Semantic UI, “words and classes are exchangeable concepts.”

Semantic UI

Semantic uses Gulp as its build tool. Many workflows have moved away from Grunt/Gulp in favor of Webpack, so Gulp might be a positive or negative for you depending on your perspective. Here’s a quick look at the workflow.

  • install node and gulp
  • install semantic-ui (you will be prompted for configuration input)
  • change into your directory and run gulp build

Materialize CSS

As you might expect, Materialize implements** Google’s Material Design, **one of the most popular design languages out there. Google has done an incredible job with pushing this design language and has created a very consistent and elegant look and feel on the Android platform. If you’re looking to build a website that with material design, this is the right route to go.

One of the really interesting fun facts about Materialize is that it was created by four different students at Carnegie Melon. This is not technically relevant, but worth mentioning as a bit of inspiration that everyone can contribute no matter the age, experience, etc!


Please enter your comment!
Please enter your name here