I have a design that goes beyond the 960 grid (1260px in fact). How can I calculate the appropriate column width and gutter to create a fluid/responsive layout?
Only you can answer that question because you know what type of content structure you have, how wide each column should be. How you calculate the width and margins/padding (gutter) is also entirely up to you. There’s no answer to that unless you use someone else’s pre-made grid, with a pre-defined set of columns for a pre-defined fixed-width.
So basically if I was to use Foundation or Bootstrap with custom calculated columns, gutters, etc. then I would be good to go?
There’s some grid generators here.
Or you could just make your own as kohoutec mentioned above:)
If you use custom calculated columns, gutters, etc., then you might as well create your own grid or use a generator, as Paul suggested.
If you use a framework, then you might want to look at the framework’s documentation. I don’t use any of them, so I really don’t know how flexible they are and whether you can adjust columns to fit your own needs without having them break somewhere down the line. I’d be very cautious and avoid the use of a framework, unless you really know it inside out.
Bootstrap’s responsive grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. Bootstrap isn’t as bad as some people make out but its quite a chunk of code to add unless you have a large site with multiple authors and then it does aid consistency between the group using it. It’s all the standard components that make bootstrap useful but you do end up with sites looking much the same and if you want to customise a lot then its probably not the best choice. I have constructed about 100 pages for a client using bootstrap 2 and it wasn’t as bad as I thought although the layout took me longer than if I’d coded it from scratch (but al the drop in components were quite useful though and made life easier - jquery plugins/dropdowns/buttons/modals/tooltips/form error handling etc).
I believe the new Sitepoint design was done using foundation which is supposed to be easier to customise and a lighter footprint that bootstrap.
The grid aspect of most of these systems is not that hard to code from scratch anyway as you only need a few minutes with normal css to set up a number of columns. The problem with grids is that designs often don’t fit into the grid (unless it was designed with a grid in mind) and you spend more time trying to modify the grid to fit the design and in some cases abandoning the grid for certain aspects that are just to hard to manage.
Designs that are grid friendly can however be done quite quickly but do tend to look the same.