Responsive design is cool and all. The shift from desktop to multiple screen sizes, both small and large, will continue but the problem of the increased development time associated with creating responsive designs can hurt. Especially, when you end up with a totally custom design that needs to work in 3-4 viewports.
Luckily, there are plenty of css frameworks that are ready for responsive design.
Pros of Using a Responsive Framework
- Faster Development
- Cheap development
- They’re free
- Standards and conventions already set
- Bugs and browser problems largely solved
- Less testing required
The first time you use a framework inevitable you’ll end up having to spend time getting familiar with it, but each time after that it should become faster. If you aren’t building websites every day it might not be worth the time investment. You just have to figure out how much time you spend building sites compared to your other tasks.
Probably the biggest benefit of using frameworks and boilerplates is the fact that most of the testing has already been done. Most of the larger ones have fixes and workarounds for all of the little bugs in different browsers and mobile versions, so you don’t have to worry as much about it. Most of use aren’t doing extensive mobile testing unless it is a major project that has the budget for it. Using a framework saves you time and gives you a little more piece of mind that at least someone has done some testing.
Whenever you use a boilerplate, template or framework you are bound to run into some problems. What you gain in speed you sometimes lose in flexibility.
- Highly custom designs can be harder to create
- Learning curve
- Problems updating version to version
- Can be difficult to implement with some CMSes
- Additional/Uneccessary markup
- Higher load speeds and additional files
- Bringing in other developers can be more difficult if they don’t know the framework
Some Helpful Responsive CSS Frameworks
Here are some of the many responsive css frameworks you can take a look at. There are pros and cons of each, but I tried to only select the frameworks that are regularly updated and supported and have a decent following. So that you don’t get stuck with something that isn’t going to be around next year. Well some of these are pretty new, but there is enough variety here that everyone should be able to find something they can be happy with.
The Gumby 960 Grid is based on, you guessed it, the 960 Framework. With the addition of being responsive and having additional built in styles that go along with most frameworks. If you’ve used 960, which most people have, this is a nice place to start.
Gumby is very robust. It not only has the usual grid but also contains buttons, forums, dropdowns and tabs. They also happen to look not to bad, might be worth using right out of the box without any additional styling.
YAML is one of those frameworks that has been around forever. Now in version 4 which is responsive. I have one site I built with version 3 and a new one I’m working on with version 4. It does seem like there is a little bit of extra markup which I don’t care for, but knocking out layouts is really fast.
This one is a 12 column grid with a fixed and fluid grid to choose from.
Yes there are a ton of these. Here are a few more if you still want to see what else is out there.
Other CSS Frameworks & CSS Related Tools
Here are some other useful tools you may want to take a look at.
A cool website with three scrollbars where you can change the number of columns, gutter, and min/max width.
One of the frameworks that has been around for quite a while.
Ridiculously small at 1kb.
I’m sure by now everyone has heard of SASS. For large projects or people spending lots of time writing style sheets this or LESS should be on your list of timesavers.
An html and css framework built with SASS. Looks pretty cool, especially if you use SASS. Doesn’t look like a whole lot of documentation or examples of use however.
Another CSS framework built with SASS.
Very similar to SASS. Honestly I haven’t had time to compare the two. Maybe in a later post.
An oldie. This was the first grid system I ever tried way back when.
Helps you develop and style forms faster.
The mobile html5 boilerplate. Enough said.
Choosing A Framework
This is a pretty big list and everyone will have to weight in different factors when making a choice. Here are a few things I look at:
- Learning Curve - You should be able to be up and running in a few hours
- Features - It should help you develop responsive sites faster, that is the goal
- Documentation - It needs good documentation. Hopefully a few sample layouts that you can pick apart or modify.
- Community - Larger projects are better, especially if there is a community behind it of people working on the project or that are there who can answer questions
If there are any good frameworks I missed or other CSS tools you like using let me know in the comments below.