via Josh Habdas

CSS frameworks are a dime a dozen and new ones are appearing all the time. You’re smart enough not to build your own when there are so many great options already available and maintained by the open source community. Rather than listing everything out there I’ve selected only a handful of well-maintained CSS frameworks I’d recommend to others for building websites.

These CSS frameworks pretty much have it all, and then some.

Foundation
It can be downloaded in several different varieties, including prepackaged builds as well as more customizable and extendable versions as well. In addition to powering hundreds of well-known websites, there’s a version to build responsive email templates as well.

Bootstrap
Like Foundation, Bootstrap features a web-based customizer enabling individuals to select just the parts of the framework they want to use, which helps reduce overall page weight when the kitchen sink is not what you need. One gripe many have with Bootstrap is that it’s hard to make sites stand apart from other Bootstrap sites as many of them look alike.

Semantic UI
Though it hasn’t gained the mindshare of the Foundations and Bootstraps of the world, Semantic UI is not something to be overlooked. Semantic UI takes a different approach to building interfaces, making it possible to mix and match many of their UI components to create truly custom layouts that can do a lot more than meets the eye until you start working with it.

Material UI
This framework set the bar early for building component-based Web apps using React. Material UI is a well-thought-out framework for building responsive applications for the Web using Google’s Material Design ethos.

Materialize
Yet another Material Design framework, Materialize gives you the same Google design feeling as the others but also includes JavaScript widgets which don’t require React to function. So if you’re looking to build responsive Websites with Material Design, with interactivity beyond what Material Design Lite provides, this may be the framework for you.

Micro frameworks

Teeny-tiny CSS frameworks for when you just need to get stuff done.

Material Design Lite
Does a lot of what Materialize can do, but doesn’t rely on JavaScript to function. A great place to start for those who want to apply Material Design concepts their Hugo or Jekyll static websites. Unfortunately, like Bootstrap, Material design can be limiting in its ability to help you differentiate the look-and-feel of your site. But perhaps those are the training wheels you’re looking for to prevent potential design snafus.

Primer
The CSS toolkit and guidelines that power GitHub. Need I say more?

Pure CSS
Created by Yahoo, Pure CSS is a great addition to accomplish simple layout and styling tasks on a site without going all-in on a larger framework. Check out the docs to see what it can do.

hack.css
hack.css describes itself as a “dead simple css framework”, and it truly is. Pairs well with the Bytesize SVG icon set by Dan Klammer.

Milligram
A minimalist CSS framework for desktop and mobile development, Milligram provides the basics to get a site set-up without using a full-featured framework.

Basscss
A low-level CSS toolkit. Basscss provides a base for desktop and mobile development, is composable and provides a number of community-supported add-ons.

Ratchet
Ratchet comes from the team that brought you Bootstrap, and provides design patterns for building mobile apps for the Web. It comes with themes for iOS and Android, and is easy to use. Sadly this framework looks to be falling behind on maintenance, but serves as a good reference for starting your own mobile CSS framework.

Animation CSS frameworks

Sequence.js
For creating sliders, presentations, banners, and other step-based applications. Sequence provides a number of free and premium themes to help you create an engaging app or wizard in no time at all.

CSShake
Some CSS classes to move your DOM! Drop it in, add some classes and do your best to determine if the page is shaking or you’ve just had too much coffee.

Animate.css
Just-add-water CSS animations. Handy for providing feedback to users, such as shaking a button when a form is invalid.