CSS frameworks are essential to the work of a front-end developer. While there's a certain bravado to the developer who writes vanilla CSS, there's also no denying that CSS frameworks save you a tremendous amount of time. Not only that, but they make it much easier to write CSS that's compatible across all browsers and browser versions.
That's why we compiled a list of the 11 best and most popular CSS frameworks, listed by decreasing GitHub stars. Some of these you'll know, others you might not have heard of. All of them are used by thousands of web developers to make their lives easier.
11 Best and Most Popular CSS Frameworks
Bootstrap
At 143,000 stars, Bootstrap is by far the most popular CSS framework. Originally developed by Twitter and officially released in 2011, Bootstrap 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.
Semantic UI
The biggest difference between Bootstrap and Semantic UI is that the latter 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 two years since the last release of Semantic and there's some uncertainty whether the framework is still actively developed.
Bulma
Contrary to the above two frameworks, 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 framework.
Bulma is the second-most loved CSS framework in the State of CSS 2019. It's 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
Materialize is a responsive front-end framework based on Google's Material Design. So if you want 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
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 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.
Tailwind
Tailwind is by far the best-loved CSS framework in the State of CSS 2019. 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.
Pure
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
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.
Although there's some strong competition from SwiftUI, UIkit is actively developed and frequently updated. Worth a look if you like developing for the Apple ecosystem.
Spectre
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.
Tachyons
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.
Milligram
Last but not least, Milligram is the smallest framework on this list. It's under 2KB gzipped and it's a framework meant for speed and performance. However, it still comes with a complete set of web development tools (including a CLI).
Milligram uses the flexbox grid and allows you to use all the features offered by the CSS3 specification. The framework lets you build minimalist, but elegant websites such as this one.
That was my list of 11 popular CSS frameworks. This should be enough to last you a long time, but if you want even more frameworks, have a look at this list of awesome CSS frameworks. Otherwise, if you think there's a framework that needs more attention, let me in the comments.
Top comments (0)