What is the best framework to use for a responsive website?

I'm not sure if you can use Wordpress or not, but if you can, I'd recommend you do and use Genesis. Wordpress + Genesis is such an awesome combo when working on any website.

Plus, since this is a project for school and if you don't plan to stick with this client, setting them up with Wordpress can allow them to edit the website easier in the future (content mainly).

If you are trying to learn about responsive CSS then you should code it out yourself. You are right in that it the best way to learn it - time allowing of course. If you just need to get something up to pass the course then I would recommend Bootstrap. It has comprehensive documentation and is easy to get up and running. I've never used Foundation but I have heard a lot of good things about it.

Foundation, plus you get some nice Javascript along with it.

If you want a framework, pick the framework that has the features you want/need most. There isn't a one size fits all answer here. Skeleton, looks very lightweight. That could be a huge plus, if that's what you need. In comparison, both bootstrap and foundation are more heavy, which could easily turn to bloat. In just comparing Foundation to Bootstrap, they offer very different javascript add-ons; so look about both frameworks and see which style and javascript attributes matter to you most. You can't go wrong with either.

If you have the time, building for own is a fantastic way to learn to do so. If you do venture down this path, I'd heavily suggest you experiment using a language like Sass (LESS is another option). This will help you tremendously in setting up your framework.

I like foundation. Depends on what you are looking for though. Might want to go with something minimal to learn the rest.

I like skeleton. The reason being you design for 4 sizes (desktop, tablet, phablet, phone), and as such you know how the site will look like at each size point. With something like bootstrap the layout changes as the size changes which means you have no idea if the design is degrading on a screen size or not and whether things are looking funky.

There are lots of issues with using CSS Frameworks. The only ones I can really recommend are SimpleGrid or Pure CSS.

http://www.techlila.com/pure-css-purest-css-framework-from-yahoo/

When doing my own projects, I tend to not use frameworks. When redesigning site or working with others, Bootstrap or Foundation seem to work fine. The things I dislike about frameworks: They're not always necessary, you end up having to override styles a lot, lots of code bloat.

Personally I think that the Zurb foundation & Bootstrap add in too much to start with. You need to learn to walk before you run.

So learning the foundations of: fluid grids, fluid images, good typography, media queries. Then maybe add in a pre-processor like Sass.

Once you've got those down you will be better able to work on a large site that is already using a framework. However I'm a firm believer in not solving problems you don't yet have.

3 of my favorite resources about frameworks:

• Grid Frameworks
• A Tale of Two Bootstraps Lessons
• Please Stop Embedding Bootstrap Classes in Your HTML

There's also a great dicussion going on about frameworks in this forum thread.

+1 to points made above. It depends what you want it do ? I've not used Bootstrap yet, but pretty much used everything from my own build to Zurb's Foundation on different projects; each may offer something different. I find it depends on the design (if there is one) and specific functionality.

The only answer that follows best practice is to use something like Susy or Neat using a CSS preprocessor. I use Susy because I use Compass but there are others.

Best practice is never to use unsemantic class values. With a preprocessor, I can simply use an @include statement to define a particular div in the grid without messing up the HTML by throwing in unsemantic classes. In fact, if any HTML element has more than 2 classes, you're almost certainly doing it wrong and are in need of a CSS preprocessing. (obviously exceptions to that, sometimes you'll need an element to have more than 2 states, but it's not too common)

You can also embed stuff like Bootstrap or Zurb or whatever with a preprocessor but to me using a predefined grid is mostly a nonstarter. You can change variables in Bootstrap and I'm sure Foundation but that's such an overly heavyweight solution for something as simple as a grid.