So I’ve been wanting to write about Responsive grid options out there and what to use for some time. Before we get into the list of what’s available, I need to point out that this list is ANYTHING but exhaustive. There is an infinite number of good responsive grid options out there on the internet, and with the advancement of Flexbox and CSS Grid, you don’t really need to always even integrate a premade responsive grid.
However, I build a lot of sites (something like 60+ in the last few years), and I can say that having a starting point that takes the math of out it is priceless in terms of what it saves you on time and sanity. Yes, there are going to be times where it doesn’t make sense to use a framework – there will also be times it doesn’t make sense to code your own grid. These just happen to be a few options that I know of and have come across before, so take my opinion and this list at face value.
At the end of the day, it’s up to you, dear developer, which you’d like to use. 🙂
Unsurprisingly enough, this list is going to start with the most popular responsive framework out there. Twitter Bootstrap boasts itself to be the most widely used and downloadable responsive UI framework on the internet today, and it’s rightly so. The framework comes with everything you need to build even the most basic static HTML website & UI in record time.
Alternatively, I would also argue that the size of the library and the amount of components Bootstrap boasts can also be a bad thing. If you’re working on a highly customized lightweight project, I would stray from using Bootstrap simply because you’re gonna pull your hair out fighting pre-set styles that don’t align with the style of your project. This is probably the biggest problem I run into when using bootstrap. Resetting some of the typography and button styles to fit can be a massive pain in the arse.
Skeleton CSS is one of my favorite, fun little frameworks to use. Although it doesn’t really call itself a framework. It’s a boilerplate. Is there a difference? I haven’t really dug deep enough on the internet to find out. What’s more important is that Skeleton CSS is super easy to use and incredibly lightweight.
The benefits of Skeleton revolve around the fact that it clocks in under 400 lines of code and provides a solid responsive grid for your project. It also includes a variety of typographic, button, and form input styles. It even has some grid utilities to help push and pull some grid columns. Skeleton is perfect to use if you need a lightweight starting point for your project and intend to design and build more customized styles.
Skeleton also uses Raleway as it’s default font which is a major plus in my book (Bootstraps Roboto can SUCK IT).
However, I’d say that the ultimate drawback about Skeleton CSS is that if you aren’t comfortable with building out more advanced CSS styles and layouts into your project, then you might have a hard time getting started. Skeleton often leaves me wanting more if I need a bigger jump start. It also needs to be downloaded and loaded directly into your project as it does not come with its own hosted CDN for integration.
I need to admit that I’ve never used the Zurb framework, but that doesn’t mean you shouldn’t. The thing about Zurb is that it offers a TON of functionality and has a big community of people who like to use it. The documentation is rock solid as well. It calls itself, “The most advanced responsive front-end framework in the world”, and that’s quite the tall order. However, after taking a stroll through the site and documentation, I’d have to likely agree despite the fact that it might not be the most popular.
The pros of the Zurb are that it has everything you need to build your project (like Bootstrap). It comes with button styles, grids, cards, layouts, navigations, backward-ass floats (if you need to build stuff for IE), accordions, and probably cooks you breakfast in the morning too.
The documentation is endless, so you shouldn’t have any trouble getting this loaded into your site. I think my favorite thing about Zurb though is that it allows you to choose the type of Zurb framework that you need. You can pick CSS or SASS and then hand select every component you need. You can then download the exact version you desire and start building. That way you aren’t fighting a bunch of pesky pre-determined styles (like Bootstrap) for your project.
Oh, and it also comes with an email Zurb counterpart (if you design and develop custom emails). I actually think I may give Zurb a try after writing this….
The cons of Zurb – well it’s hard to find some because it pretty much offers everything Bootstrap does and is more customizable. However, if I had to pick a drawback, it’s that there since it’s the most advanced responsive front-end framework, it comes with a ton of documentation on how to get started. All of that documentation and framework options can be quite overwhelming especially if you aren’t advanced enough to be able to dig through all of that and make sense of it. That alone would have pushed me away from the beginning in terms of getting started. So make of it what you will and if that doesn’t scare you, then give Zurb a shot.
Like Skeleton CSS, Flexbox Grid is lightweight. Flexbox Grid is actually more lightweight because that’s exactly what it is. It’s just a good old responsive grid based on flexbox. There are no bells and whistles when it comes to this. There are no utilities, no styles you have to fight, NOTHING else. And in a way that’s the pure joy of it. I’m not even going to write a major pros and cons list for it because there’s not much else to say.
I’ve personally used this one in a variety of projects because it integrates well with old sites. I’ve had a number of clients with massive, complicated sites running 3-4 years ago who need new landing pages built. Instead of haphazardly wading through their website and figuring out how the heck it works, I just drop in a little Flexbox Grid and BOOM I’m off the races.
Okay, there’s generally more work than that like setting up new WordPress templates and making sure I pull in the right header/footers, but that’s a horse of a different color entirely.
My only gripe with Flexbox Grid is that it’s a few years old. But you know what they say — Do it right the first time and you’ll never have to do it again. Flexbox Grid is literally what you get and to me, there’s a beauty in that. Use this and be at peace with the fact that you do the rest of what you need from scratch.
Unless you’ve lived under a very large rock, you’ll have heard of Google’s design standard called Material Design. Material design is what Google’s entire product UI is based on. It’s a major guide on how to implement typography, spacing, content blocks, cards, images, and colors. Well, you can thank the internet for turning that into a usable and downloadable framework for you to build your UI with. I haven’t used this personally (actually I might’ve tried in a past personal project, but can’t really remember).
The pros of Material Design Lite is that it offers a lot of the stuff that Bootstrap and Zurb do. You can pull it in via CDN and be off to the races. At this point, it’s kind of expected for something of this caliber. It even offers some more advanced integration for building with BOWER and NPM (that stuff is above my paygrade). Something I really really like about Material Design Lite are the micro-animations that come with it — like what happens when you click the buttons. I also seem like Google’s aesthetic more than I like Bootstraps. It’s more modern looking in my opinion.
The con about MDL is that the framework and documentation aren’t really geared towards designing websites. It is, but it isn’t. What I mean by that is while you certainly can build a website with it because it offers the HTML to do so, it doesn’t explicitly offer a basic HTML template get started. It’s really meant for dynamic web apps and highly dynamic websites where the database is driving repeatable styles and content.
It also assumes that you have a pretty good understanding of what you’re doing. That may make it too advanced for some of y’all (which is fine, I’m not hating). While I’m pretty sure someone out there made a Frankenstein of Bootstrap and MDL, I’m not even going to try and post that here. Those abominations shouldn’t exist. So at the end of the day, you can make your own assumption if this is the right thing for you.