I have experience in building static websites by using HTML5 and CSS3 with fixed dimensions expressed in px. I use to write CSS by hand and probably that is the best way (combined with the use of SASS and Compass wich i still have to learn). Now i have to realize a new website and i'm trying to make a flexible layout that is displayed nicely on any main browser (Internet Explorer, Firefox, Opera, Safari) with any browser size on desktop and mobile. I'm more concerned about the desktop resolution right now but if it looks good also on mobile devices it is better.
I'm currently reading the book "Responsive Web Design" by Ethan Marcotte and i'm learning about the use of percentages when i have to set a dimension by using his formula: Target / Context = Result (basically a proportion between the content and the container). I think this is a good way to make flexible websites. Responsive websites as Ethan Marcotte states should have 3 ingredients:
I think it is a good way to achieve it.
Apart from that theory and handcrafted CSS, there may be elements displayed differently in different browsers. I already tried Css reset and Normalize.css which i'm currently using and i prefer. I would like to try HTML5 Boilerplate which integrates also Modernizr. Do you recommend it?
Lately there is an increasing number of grid systems (even Adobe Dreamweaver CS6 implements a way of creating fluid layout grids using also respond.js . Any good?) i'm thinking of trying 960 grid system or Foundation from ZURB. I know there is a different version of 960gs for fluid layouts, anyway is Foundation better for now for fluid layouts?
And finally is it possible to combine HTML5 Boilerplate with 960gs or Foundation and does it make sense?
I already read questions and answers related to these topics but usually they are specific to 1 thing. I would like to have a global view of all these things together and have recommendations on how to proceed. I thank you all in advance.
Whatever 960gs gives, Bootstrap and Foundation both give + more. That is Bootstrap and Foundation both already contain a grid-based layout with an option for responsiveness.
That said, I suggest you have a very close look at Bootstrap and Foundation and then draw your own comparison. Choose the one that offers the features you like more. One out of the two should be enough, if you're well organised in what you're doing.
Since you haven't even tried any, I suggest you really do now and your question will be gone in a twinkle of an eye. And I suggest you start with Bootstrap, cos when you do, you might never consider trying out the rest even.