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.
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.
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.
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.
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.
Teeny-tiny CSS frameworks for when you just need to get stuff done.
Material Design Lite
The CSS toolkit and guidelines that power GitHub. Need I say more?
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 describes itself as a “dead simple css framework”, and it truly is. Pairs well with the Bytesize SVG icon set by Dan Klammer.
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.
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 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
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.
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.
Just-add-water CSS animations. Handy for providing feedback to users, such as shaking a button when a form is invalid.