CSS frameworks are essential to the work of a front-end developer. While vanilla CSS has its charm, any developer worth their salt knows that CSS frameworks can save a tremendous amount of time. The best CSS frameworks also make it much easier to write CSS that's compatible across all browsers and browser versions.
So here’s a list of the 12 best and most popular CSS frameworks, listed by decreasing GitHub stars. Some of these you'll know, others may not have heard of, but all of them are used by thousands of developers.
At over 150,000 stars, Bootstrap is by far the top CSS framework. Originally developed by Twitter and officially released in 2011, it is one of the most stable and responsive frameworks currently out there. The framework comes with a mobile-first grid design based on flexbox that allows you to divide the screen into 12 columns.
Bootstrap also comes with lots of prebuilt components, an SVG icon library, and plenty of great themes. The framework has a big, active community and its documentation is clear and comprehensive. Here are a few Bootstrap examples.
Tailwind continues to be the CSS framework developers are most satisfied with. It is a highly customizable, low-level CSS framework written in PostCSS and configured in JS.
Instead of opinionated, predesigned components, Tailwind focuses on utility classes, which you apply directly in your HTML. While it might look ugly at first (something that Tailwind readily acknowledges) they encourage you to try it and see how much easier it makes things.
The biggest difference between Bootstrap and Semantic UI is that Semantic uses syntax from natural languages to create classes. This makes class names easy to read and understand. Want three buttons? Type <div class="ui three buttons">. Want only an icon in a button? Type <button class="ui icon button">.
Semantic UI has more than 3,000 theming variables and 50+ UI components. Its default layouts look quite good, particularly when compared to the somewhat bland layouts of default Bootstrap. This being said, it's been four years since the last update to Semantic UI. There’s a community fork called Fomantic-UI that’s still receiving updates that you may want to check out instead.
Bulma is a CSS-only framework. You need just a single .css file. There are no components that require JavaScript to function. Bulma is environment-agnostic; it's the style layer on top of the logic. This also makes it a fairly lightweight CSS framework.
Bulma is built with flexbox and, similar to Semantic UI, uses syntax that is easy to read. The Bulma website has interactive tutorial videos that make the framework easy to learn and quick to grasp. Here are a few websites people have built with Bulma.
Materialize is a responsive front-end framework based on Google's Material Design. So if you like the bold, eye-catching designs you see in Google products such as YouTube, Gmail, and Google Drive, this could be the framework for you.
Like Bootstrap, Materialize uses a responsive and fluid 12-column grid system. Although Materialize comes with fewer UI components than Bootstrap, it has a few default components and effects that default Bootstrap doesn't have, such as toasts and parallax. Find a few examples here.
Foundation is a responsive, mobile-first framework that has completely semantic markup and works particularly well for Ruby on Rails projects. It comes with a responsive grid and HTML and CSS UI components, templates, etc. There's more to it, though, as Foundation also has an email component that allows you to build nice-looking HTML emails.
The Foundation website has many tutorials to help you master the framework. It's one of the more comprehensive CSS frameworks available (it comes with features such as right-to-left support), which means it's powerful, but might also take some time to learn.
At 3.7KB minified and gzipped, Pure is a very lightweight CSS framework. It's built on Normalize.css and provides you with styling and layout for native HTML elements, as well as the most common UI components.
Pure is built with mobile devices in mind and is a great starting point for the developer who wants to keep file sizes to an absolute minimum, while still using a CSS framework to speed up development and stay compatible across browsers. Find a few layout examples here.
UIKit is a lightweight, modular, and minimalist front-end framework. Although lightweight, it still has a comprehensive list of components and is particularly geared toward developing iOS apps.
UIKit is interoperable with SwiftUI and is frequently updated. Worth a look if you like developing for the Apple ecosystem.
Tachyons is a collection of small CSS modules that can be mixed and matched or used independently. At less than 14KB gzipped (if you use all the modules), it's also a fairly lightweight CSS framework.
Tachyons won't override your existing styles, which means that you can lay it on top of your existing CSS. The framework is built to be edited and customized, and is highly flexible as a result.
Primer is the design system that GitHub use and love so much they made it open-source. It’s built to help you create consistent user experiences across a wide variety of websites. The framework is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture.
Primer has utilities and components that can be mixed and matched in different layouts regardless of their location. It is regularly updated and gives you the ability to use GitHub’s icons in Ruby and JavaScript implementations.
Similar to Bulma, Spectre is a CSS framework that's pure CSS and no JavaScript. At approximately ~10KB gzipped, this makes it one of the more lightweight frameworks on this list.
Spectre has a responsive grid system based on flexbox, basic styles for typography and elements, and pure CSS components and utilities that look quite elegant out of the box.
Halfmoon is a fairly new CSS framework that many developers are interested in learning. It has a built-in dark mode, an optional JavaScript library with no extra dependencies, and full customizability of around 1,500 CSS variables.
You can think of Halfmoon as Bootstrap with an integrated dark mode implementation. If you love dark mode and love a toggle switch between dark and light even more, this CSS framework may be worth checking out.
This was a list of 12 popular CSS frameworks. It should be enough to last you a long time. But if you think there's a framework that needs more attention, let us know by replying to the tweet below.
Favorite CSS frameworks? 👇
— X-Team (@xteam) July 22, 2020