Legit CSS Frameworks

An evergreen list of free and open source CSS frameworks worthy of your time.

6 minutes read

CSS frameworks are a dime a dozen, and new ones are appearing all the time. If you’re smart enough not to build your own when there are so many great open source options available, this list is for you. Rather than listing everything out there I’ve selected only a handful of well-maintained or noteworthy CSS frameworks I’d recommend to others.

Contributions via comments welcome. The best CSS Frameworks will be moved into the article body and the nofollow1 removed.

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

Foundation
Created and managed by Zurb, I’ve been tracking Foundation for several years and used it to build ChicagoGangHistory.com, which receives 75% of its traffic from mobile. Foundation makes it easy to build professional mobile-first and fully responsive websites.

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.

Update 2017-02-05: I’m starting to work with @Phlow and another contributor on GitHub to port his wonderful theme Feeling Responsive from Foundation 5 to Foundation 6 and was astonished to learn not only does Foundation 6 support ARIA and RTL languages, it’s also 50% smaller than Foundation 5. Wow!

Bootstrap
This framework needs little introduction. Born out of Twitter, Bootstrap is one of the most well-known and widely deployed CSS frameworks out there. I used this at Sears to build out their new product detail pages back when Backbone was still being used to create <abbr=”Single-Page Apps”>SPAs</abbr>. After a few years with no new versions, the Bootstrap team seems to have gotten things together and is starting releasing updates on a more frequent cadence.

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. I used the Semantic UI to build a React-based SaaS during my time at TechnologyAdvice when the React-port was still called Stardust and was thoroughly impressed with the speed and power of the interfaces I could build.

Material UI
Though I’ve covered Material UI in my list of Awesome React Components it’s worth mentioning here as 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.

UIkit
UIkit brands itself as “A lightweight and modular front-end framework for developing fast and powerful web interfaces.” They’ve got through a number of iterations already, and maintain a Changelog to help keep you updated on what’s happening.

Micro frameworks

Teeny-tiny, lightweight CSS frameworks for when you just need to get shit schtuff done.

Bulma
This one had completely escaped my radar until it popped up in the comments thanks to Victor Bastos. It’s CSS only, and wow that’s a damn sexy docs site. I cannot wait to give this one a spin!!!

hack.css
hack.css describes itself as a “dead simple css framework”, and it truly is. I used this tiny little framework, which does not package itself with a CSS reset or normalize (and for good reason), to build the After Dark theme for Hugo. Pairs well with the Bytesize SVG icon set by Dan Klammer.

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.

mini.css
As the author points out mini.css isn’t exactly a full-featured framework, but it’s not a micro framework either. Regardless, I took a look at the doc site and was surprised to see such comprehensive documentation and even quick reference guide with code snippets and links to functional Pens. mini lives up to its name with a pretty lightweight footprint – clocking in at just 7kb compressed. That’s awesome!

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.

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

Pure.css
Created by Yahoo, Pure CSS can be added piecemeal to accomplish simple layout and styling tasks on a site without going all-in on the kitchen sink. Check out the docs to see what it can do.

Spectre
Spectre brands itself as a ligtweight, responsive and modern CSS framework for faster and extensible development. The doc site is very nicely laid out and there’s some pretty nifty-looking CJK support baked-in. They’re also planning on adding support for email templates, something I haven’t seen anyone except for Foundation do. Thanks to @roemhildtg for bringing it to my attention in the comment section below.

Animation CSS frameworks

Frameworks and libraries to help you really move your users.

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.

CSS Toolkits

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.

Susy
Used to create Michael Rose’s popular Minimal Mistakes Jekyll theme, Susy is a responsive toolkit for use with Sass.

  1. nofollow links indicate the linked document is not endorsed by the author of the linking site. For example, if the author doesn’t trust it, does not wish to pass authority, or if there is commercial relationship between the two, a link is more likely to be nofollowed. nofollow links play a role in the passage of authority and page rank in Search engine algorithms.

Leave a Comment