I've been messing about with putting together basic websites and more recently have been looking at wordpress as a CMS for websites im playing about with.

 

This leads me onto the following question, in the quest for a great layout, how relevant is the 960 grid system? it looks like a great system to build upon. I have been working with it for a few days and am impressed so far.

Its a good css frameworks well worth looking into, I use it sometimes but sometimes its easier to write the css manually.

Its a good css frameworks well worth looking into, I use it sometimes but sometimes its easier to write the css manually.

 

Thanks for the reply

 

Would that be writing the CSS manually but following the basic rules of having a 960px container with all content contained within?

thats correct, use the grid psd you get but after that i usually just write my own css.

You like the 960 grid system? The 970 grid system is better according to this:-

http://uxmovement.com/wireframes/wireframe-effectively-on-the-new-and-improved-970-grid-system/

Read "Problems with the 960 grid system"

Note that the columns use 970px and there are no side gutters (you center it all in a window)

 

and see it here with equal width gutters:-

http://www.gridsystemgenerator.com/gs02.php?GridWidth=970&GridColumns=12&GridMarginLeft=10

Note that this 970 version has 950px wide columns and 10px side gutters so it's a variation of the above example

 

while the 960 system has unequal gutters:-

http://960.gs/demo.html

Edited July 1, 201115 yr by Wickham

One benefit of using 960 is that is works well when creating a responsive layout where the minimum container width needs to be 320px for small screen devices, 960 divides nicely into 3 x 320

You like the 960 grid system? The 970 grid system is better according to this:-

http://uxmovement.com/wireframes/wireframe-effectively-on-the-new-and-improved-970-grid-system/

Read "Problems with the 960 grid system"

and see it here with equal width gutters:-

http://www.gridsystemgenerator.com/gs02.php?GridWidth=970&GridColumns=12&GridMarginLeft=10

while the 960 system has unequal gutters:-

http://960.gs/demo.html

 

Thanks for the link, It was a good read and had some interesting points, I also saw something earlier about the 978 grid system, but that website appears to be down at the moment.

I've found that the CSS framework in grid systems tends to be far more bloated than it should be.

 

I use the 960gs only in the sense that I use the guides for the 16 col grid, but even then I find myself straying from the grid and making my own proportions. It's a useful baseline but going towards something freeform is probably a good idea for more experienced designers.

 

For newbies a grid system provides a nice set of standardized constraints that force you to start obeying some basic composition theories, but other than that it becomes a crutch.

 

And besides, with responsive design being such a great option it makes more sense to just think about things in proportions instead of exact measurements.

One ought not be dogmatic about 960gs.

Neither about nothing, though.

960.gs is slightly flawed - it's been around for a while, and for fixed-width designs the proportions aren't exactly ideal with the new trend for larger text. I disagree with the article linked by Wickham in the sense that 20px gutters are not too wide, but too narrow.

 

If you absolutely must use a fixed grid, try this:

 

.container {
width: 978px;
margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
float: left;
margin-left: 30px;
}
.grid1 {
width: 54px;
}
.grid2 {
width: 138px;
}
.grid3 {
width: 222px;
}
.grid4 {
width: 306px;
}
.grid5 {
width: 390px;
}
.grid6 {
width: 474px;
}
.grid7 {
width: 558px;
}
.grid8 {
width: 642px;
}
.grid9 {
width: 726px;
}
.grid10 {
width: 810px;
}
.grid11 {
width: 894px;
}
.first {
margin-left: 0;
clear: left;
}

 

Nesting is simpler than 960.gs, gutters are wider and any extra margin necessary to provide a background image can be applied to the container. There's no extraneous markup required to clear floats.

Edited July 2, 201115 yr by Renaissance-Design