9 open source CSS frameworks for frontend web development

Explore open source CSS frameworks and find the right one for your project.
675 readers like this
675 readers like this
Digital creative of a browser on the internet

When most people think about web development, HTML or JavaScript usually come to mind. They usually forget about the technology that has far more impact on the ability to enjoy a website: cascading style sheets (CSS). CSS is both one of the most important and the most often forgotten parts of any webpage, even though it's one of the three cornerstone technologies of the World Wide Web, according to Wikipedia.

This article explores nine popular, powerful, and open source frameworks that make CSS development straightforward for building beautiful website frontends.

Name What It Is License
Bootstrap The most popular CSS framework; by Twitter MIT
PatternFly Open source framework; by Red Hat MIT
Material Components for the web Open source framework; by Google MIT
Pure Open source framework; by Yahoo BSD
Foundation Frontend framework; by Zurb Foundation MIT
Bulma Modern CSS framework based on Flexbox MIT
Skeleton Lightweight CSS framework MIT
Materialize CSS framework based on Material Design MIT
Bootflat Open source Flat UI kit based on Bootstrap 3.3.0 MIT

 

If you prefer to follow along as I explore this live, you can watch my video.

Bootstrap

Bootstrap is easily the most popular CSS framework, and it is the one that started all frontend web design. Developed by Twitter, Bootstrap offers usability, functionality, and extensibility.

Bootstrap homepage

Bootstrap also offers plenty of examples to get you started.

Bootstrap examples

With Bootstrap, you can stitch together different components and layouts to create an interesting page design. It also offers plenty of detailed documentation.

Bootstrap documentation

Bootstrap's GitHub repository lists more than 19,000 commits and 1,100 contributors. It is based on the MIT License, so (as with all of the frameworks on this list) you can jump in and contribute as well.

Bootstrap GitHub

PatternFly

PatternFly is an open source (under the MIT License) CSS framework by Red Hat. PatternFly takes a different approach than Bootstrap: While Bootstrap is meant for anyone interested in creating a beautiful website, PatternFly is primarily focused on enterprise application developers and provides components, such as bars, charts, and navigations, that are very appealing for creating powerful, metrics-driven dashboards. In fact, Red Hat uses this CSS framework for the design of its products, such as OpenShift.

PatternFly homepage

In addition to static HTML, PatternFly also supports the ReactJS framework, a popular JavaScript framework developed by Facebook.

PatternFly ReactJS support

PatternFly has many advanced components, such as bars, charts, modals, and layouts, that are suitable for enterprise-level applications.

PatternFly chart component

PatternFly's GitHub page lists more than 1,050 commits and 44 contributors. PatternFly is getting a lot of attention, and you are more than welcome to contribute.

PatternFly GitHub

Material Components for the web

With its highly successful Android platform, Google set its own standard design guidelines with a concept called Material Design. The Material Design standards are intended to be reflected across all Google products, and they are also available to the general public and open source under the MIT License.

Material Design homepage

Material Design has a number of Components, "interactive building blocks for creating a user interface." These buttons, cards, backdrops, and more can be used to create any type of user interface for a website or mobile application.

Material Components webpage

The maintainers provide thorough documentation for different platforms.

Material Design documentation

There are also step-by-step tutorials with exercises for accomplishing different goals.

Material Design tutorial

The Material Components GitHub page hosts repos for different platforms, including Material Components for the web (MDC Web) for website development. MDC Web has more than 5,700 commits and 349 contributors.

MDC Web GitHub

Pure

Bootstrap, Patternfly, and MDC Web are very powerful CSS frameworks, yet they can be quite heavy and complex. If you want a lightweight CSS framework that it is closer to coding CSS yourself yet helps you build a nice web page, try Pure.css. Pure is a lightweight CSS framework with a minimal footprint. It was developed by Yahoo and is open source under the BSD License.

Pure.css homepage

Despite its small size, Pure offers plenty of the components necessary to build a good-looking webpage.

Pure.css components

Pure's GitHub page shows more than 565 commits and 59 contributors.

Pure.css GitHub

Foundation

Foundation claims to be the most advanced responsive frontend framework in the world. It provides advanced features and tutorials for building professional websites.

Foundation homepage

The framework is used by many companies, organizations, and even politicians, and it has plenty of documentation available.

Foundation documentation

Foundation's GitHub page shows nearly 17,000 commits and 1,000 contributors. Like most of the other frameworks on this list, it's available under the MIT License.

Foundation GitHub

Bulma

Bulma is an open source framework based on Flexbox and available under the MIT License. Bulma is a pretty lightweight framework, as it requires only one CSS file.

Bulma homepage

Bulma has clean and simple docs that make it easy to choose the topics you want to explore. It also has a number of web components you can just pick up and use in your design.

Bulma documentation

Bulma's GitHub page lists more than 1,400 commits and 300 contributors.

Bulma GitHub

Skeleton

If even Pure is too heavy for you, there is an even lighter-weight framework called Skeleton. The Skeleton library is only about 400 lines long, and the framework provides only the essential components to start your CSS framework journey.

Skeleton homepage

Despite its simplicity, Skeleton offers detailed docs to help you get started right away.

Skeleton documentation

Skeleton's GitHub lists 167 commits and 22 contributors. However, it's not the most active project; its last update was in 2014, so it may need some maintenance before using it. Since it is released under the MIT License, feel free to do that yourself.

Skeleton GitHub

Materialize

Materialize is a responsive frontend framework based on Google's Material Design with additional themes and components developed by Materialize's contributors.

Materialize homepage

Materialize's documentation page is comprehensive and pretty easy to follow. Its components page includes buttons, cards, navigations, and more.

Materialize documentation

Materialize is an open source project under the MIT License, and its GitHub lists more than 3,800 commits and 250 contributors.

Materialize GitHub

Bootflat

Bootflat is an open source CSS framework derived from Twitter's Bootstrap. Compared to Bootstrap, Bootflat is simpler, with lighter-weight framework components.

Bootflat homepage

Bootflat's documentation almost seems inspired by IKEA—it shows an image of each component without much text.

Bootflat docs

Bootflat is available under the MIT License, and its GitHub page includes 159 commits and eight contributors, as of this writing.

Bootflat GitHub

Which CSS framework should you choose?

You have many options for open source CSS frameworks, depending on how feature-rich or simple you want the tooling to be. Like all technology decisions, there is no single right answer for everything or everyone; there is only the right choice for the given time and the given project.

Give a few of these a spin and see which one you want to use in your next project. Also, did I miss any interesting open source CSS frameworks? Please share your feedback and ideas in the comments below.

What to read next
Bryant Jimin Son is an Octocat, which not official title but likes to be called that way, at GitHub, a company widely known for hosting most open source projects in the world. At work, he is exploring different git technology, GitHub Actions, GitHub security, etc. Previously, he was a Senior Consultant at Red Hat, a technology company known for its Linux server and opensource contributions.

16 Comments

Bryant thanks, it's a good place to start, I may need to dive into that soon (I'm definitely not a front-end person so simple frameworks help!)

Did you consider at all 960 (https://960.gs/) or unsemantic (https://unsemantic.com/)? I've used both in the past to some success, pretty bare-bones for formatting only, but I'm looking for something to get my internal sites to the next level.

Thanks!

I didn't see tailwind CSS in the list. Isn't it open source?

This isn't meant to be a comprehensive guide to all CSS frameworks. Many somethings will invariably be left out of an article like this. That's the case with Tailwind CSS.

If you're interested in writing an introduction to Tailwind, feel free to pitch the idea to the editorial team.

In reply to by Simeon Udoh (not verified)

Thank you for this article presenting the different open source CSS frameworks !

Thanks for the article. I didn't know there are so many CSS frameworks. I only knew about bootstrap. Will share this with my colleagues it will help them.

For all these CSS frameworks, can I use multiple CSS frameworks in my project? Or do I stick to one css framework once I use it in my project?

Since they are CSS frameworks, it is certainly feasible to import multiple CSS frameworks. But, generally, I would not recommend importing multiple projects within one project. You will have a nightmare with overlapping properties.

In reply to by Henry

Missed Tailwind Css

Thank you for this article talking about open source CSS frameworks !

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.